diff --git a/.eslintrc.js b/.eslintrc.js index 78be0995..d09347a2 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -8,12 +8,12 @@ module.exports = { __DEV__: false, }, rules: { - // 'vue/comment-directive': 'off', - // 'global-require': 'off', - // 'import/no-unresolved': 'off', - // 'no-restricted-syntax': 'off', - // 'no-undefined': 'off', - // 'vue/valid-template-root': 'off', + 'vue/comment-directive': 'off', + 'global-require': 'off', + 'import/no-unresolved': 'off', + 'no-restricted-syntax': 'off', + 'no-undefined': 'off', + 'vue/valid-template-root': 'off', }, env: { jest: true, diff --git a/docs/.vuepress/configs/sidebar/zh.ts b/docs/.vuepress/configs/sidebar/zh.ts index 71d364a7..2fbc1dc7 100644 --- a/docs/.vuepress/configs/sidebar/zh.ts +++ b/docs/.vuepress/configs/sidebar/zh.ts @@ -1,82 +1,67 @@ -import type { SidebarConfig } from '@vuepress/theme-default' +import type { SidebarConfig } from '@vuepress/theme-default'; export const zh: SidebarConfig = { - '/guide/': [ - { - // isGroup: true, - text: '介绍', - children: [ - '/guide/README.md', - '/guide/getting-started.md', - ], - }, - { - // isGroup: true, - text: '基础', - children: [ - '/guide/directory-structure.md', - '/guide/builder.md', - '/guide/config.md', - '/guide/runtime-config.md', - '/guide/env.md', - '/guide/route.md', - '/guide/plugin.md', - '/guide/template.md', - '/guide/mock.md', - '/guide/upgrade3.md', - ] - }, - { - // isGroup: true, - text: '样式和资源文件', - children: [ - '/guide/image.md', - '/guide/css.md', - '/guide/public.md', - ] - }, - "/guide/contributing.md", - "/guide/faq.md" - ], - '/reference/config/': [ - '/reference/config/README.md' - ], - '/reference/api/': [ - '/reference/api/README.md' - ], - '/reference/plugin/': [ - '/reference/plugin/README.md', - { - // isGroup: true, - text: 'Plugins', - children: [ - '/reference/plugin/plugins/access.md', - '/reference/plugin/plugins/enums.md', - '/reference/plugin/plugins/icon.md', - '/reference/plugin/plugins/jest.md', - '/reference/plugin/plugins/layout.md', - '/reference/plugin/plugins/locale.md', - '/reference/plugin/plugins/model.md', - '/reference/plugin/plugins/request.md', - '/reference/plugin/plugins/vuex.md', - '/reference/plugin/plugins/qiankun.md', - '/reference/plugin/plugins/windicss.md', - '/reference/plugin/plugins/sass.md', - '/reference/plugin/plugins/editor.md', - '/reference/plugin/plugins/pinia.md', - '/reference/plugin/plugins/watermark.md', - ], - }, - { - // isGroup: true, - text: '插件开发', - children: [ - '/reference/plugin/dev/README.md', - '/reference/plugin/dev/api.md' - ], - }, - ], - '/reference/cli/': [ - '/reference/cli/README.md', - ], -} + '/guide/': [ + { + // isGroup: true, + text: '介绍', + children: ['/guide/README.md', '/guide/getting-started.md'], + }, + { + // isGroup: true, + text: '基础', + children: [ + '/guide/directory-structure.md', + '/guide/builder.md', + '/guide/config.md', + '/guide/runtime-config.md', + '/guide/env.md', + '/guide/route.md', + '/guide/plugin.md', + '/guide/template.md', + '/guide/mock.md', + '/guide/upgrade3.md', + ], + }, + { + // isGroup: true, + text: '样式和资源文件', + children: ['/guide/image.md', '/guide/css.md', '/guide/public.md'], + }, + '/guide/contributing.md', + '/guide/faq.md', + ], + '/reference/config/': ['/reference/config/README.md'], + '/reference/api/': ['/reference/api/README.md'], + '/reference/plugin/': [ + '/reference/plugin/README.md', + { + // isGroup: true, + text: 'Plugins', + children: [ + '/reference/plugin/plugins/access.md', + '/reference/plugin/plugins/enums.md', + '/reference/plugin/plugins/icon.md', + '/reference/plugin/plugins/jest.md', + '/reference/plugin/plugins/layout.md', + '/reference/plugin/plugins/locale.md', + '/reference/plugin/plugins/model.md', + '/reference/plugin/plugins/request.md', + '/reference/plugin/plugins/vuex.md', + '/reference/plugin/plugins/qiankun.md', + '/reference/plugin/plugins/windicss.md', + '/reference/plugin/plugins/sass.md', + '/reference/plugin/plugins/editor.md', + '/reference/plugin/plugins/pinia.md', + '/reference/plugin/plugins/watermark.md', + '/reference/plugin/plugins/login.md', + ], + }, + { + // isGroup: true, + text: '插件开发', + children: ['/reference/plugin/dev/README.md', '/reference/plugin/dev/api.md'], + }, + ], + '/reference/cli/': ['/reference/cli/README.md'], +}; diff --git a/docs/reference/plugin/plugins/access.md b/docs/reference/plugin/plugins/access.md index ba27911f..65575b8c 100644 --- a/docs/reference/plugin/plugins/access.md +++ b/docs/reference/plugin/plugins/access.md @@ -1,114 +1,126 @@ # @fesjs/plugin-access ## 介绍 + 对于前端应用来说,权限就是页面、页面元素是否可见。 ### 资源 + Fes.js 把页面、页面元素统一叫做资源,用资源 ID 来识别区分他们: -- 页面的资源 ID 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面,`/a` 也就是页面的 `accessId`。 - -- 页面元素的资源 ID 没有默认值,需要自定义。 + +- 页面的资源 ID 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面,`/a` 也就是页面的 `accessId`。 +- 页面元素的资源 ID 没有默认值,需要自定义。 + ```vue ``` - ### 匹配规则 #### 全等匹配 -资源的匹配规则默认是使用全等匹配,比如页面 `pages/a.vue` 对应路由 `path` 是 `/a`,则 `/a` 就是页面的资源ID。如果我们设置: + +资源的匹配规则默认是使用全等匹配,比如页面 `pages/a.vue` 对应路由 `path` 是 `/a`,则 `/a` 就是页面的资源 ID。如果我们设置: + ```js -access.setAccess(['/a']) +access.setAccess(['/a']); ``` + 由于权限列表中包含`/a`,则表示拥有此页面权限。 #### 模糊匹配 + 页面`@id.vue`会映射为动态路由`/:id`,想匹配此页面有两种办法: -- **access.setAccess(['/:id'])** -- **access.setAccess(['/*'])** + +- **access.setAccess(['/:id'])** +- **access.setAccess(['/*'])** 第二种是模糊匹配,`*`表示任意路径。比如角色`admin`需要全部权限,则可以: + ```js export default { access: { roles: { - admin: ["*"] - } - } -} + admin: ['*'], + }, + }, +}; ``` - ### 角色 -通常我们会用角色来控制权限,相应的Fes.js 用角色定义一组资源。当访问 Fes.js 应用时,使用插件提供的 API 设置用户的角色,角色对应的资源才可见,非角色对应的资源不可见。 +通常我们会用角色来控制权限,相应的 Fes.js 用角色定义一组资源。当访问 Fes.js 应用时,使用插件提供的 API 设置用户的角色,角色对应的资源才可见,非角色对应的资源不可见。 当然有时候业务比较复杂,角色对应的权限是动态的。不要怕!插件提供粒度更细的 API 来设置当前用户能访问的资源。 - ## 启用方式 + 在 `package.json` 中引入依赖: + ```json { "dependencies": { "@fesjs/fes": "^2.0.0", "@fesjs/plugin-access": "^2.0.0" - }, -} -``` - -## 编译时配置 -在执行 `fes dev` 或者 `fes build` 时,通过此配置生成运行时的代码,在配置文件`.fes.js` 中配置: -```js -export default { - access: { - roles: { - admin: ["/", "/onepiece", '/store'] - } } } ``` +## 编译时配置 + +在执行 `fes dev` 或者 `fes build` 时,通过此配置生成运行时的代码,在配置文件`.fes.js` 中配置: + +```js +export default { + access: { + roles: { + admin: ['/', '/onepiece', '/store'], + }, + }, +}; +``` + ### roles -- **类型**:对象 - -- **默认值**:`{}` -- **详情**: - - 角色预定义列表。`key` 是角色 Id ,`value`是角色 Id 对应的资源列表。 +- **类型**:对象 +- **默认值**:`{}` +- **详情**: + + 角色预定义列表。`key` 是角色 Id ,`value`是角色 Id 对应的资源列表。 ## 运行时配置 + 在 `app.js` 中配置 ### unAccessHandler -- **类型**:`Function` - -- **默认值**:`null` -- **详情**: - - 当进入某个路由时,如果路由对应的页面不属于可见资源列表,则会暂停进入,调用 `unAccessHandler` 函数。 -- **参数** - - router:createRouter 创建的路由实例 - - to: 准备进入的路由 - - from:离开的路由 - - next: [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next) +- **类型**:`Function` +- **默认值**:`null` + +- **详情**: + + 当进入某个路由时,如果路由对应的页面不属于可见资源列表,则会暂停进入,调用 `unAccessHandler` 函数。 + +- **参数** + - router:createRouter 创建的路由实例 + - to: 准备进入的路由 + - from:离开的路由 + - next: [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next) 比如: + ```js export const access = { unAccessHandler({ to, next }) { @@ -121,26 +133,27 @@ export const access = { accessApi.setAccess(accesssIds.concat(['/403'])); } next('/403'); - } + }, }; - ``` ### noFoundHandler -- **类型**:`Function` - -- **默认值**:`null` -- **详情**: - - 当进入某个路由时,如果路由对应的页面不存在,则会调用 `noFoundHandler` 函数。 -- **参数** - - router:createRouter 创建的路由实例 - - to: 准备进入的路由 - - from:离开的路由 - - next: [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next) +- **类型**:`Function` +- **默认值**:`null` + +- **详情**: + + 当进入某个路由时,如果路由对应的页面不存在,则会调用 `noFoundHandler` 函数。 + +- **参数** + - router:createRouter 创建的路由实例 + - to: 准备进入的路由 + - from:离开的路由 + - next: [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next) 比如: + ```js export const access = { noFoundHandler({ next }) { @@ -149,69 +162,90 @@ export const access = { accessApi.setAccess(accesssIds.concat(['/404'])); } next('/404'); - } + }, }; +``` +### ignoreAccess + +- **类型**:`Array` +- **默认值**:`null` + +- **详情**: + + 配置需要忽略权限校验的页面。 + +比如: + +```js +export const access = { + ignoreAccess: ['/login'], +}; ``` ## API ### access + 插件 API 通过 `@fesjs/fes` 导出: + ```js -import { access } from '@fesjs/fes' +import { access } from '@fesjs/fes'; ``` #### access.hasAccess -- **类型**:( accessId: string | number ) => Promise\ - -- **详情**: 判断某个资源是否可见。 -- **参数**: - - accessId,资源Id -- **返回值**:是否有权限 + +- **类型**:( accessId: string | number ) => Promise\ +- **详情**: 判断某个资源是否可见。 +- **参数**: + - accessId,资源 Id +- **返回值**:是否有权限 #### access.isDataReady -- **类型**:() => boolean - -- **详情**:可以用异步数据来设置权限,`isDataReady` 用来判断异步数据是否已经加载完毕。 -- **参数**:null -- **返回值**:Boolean + +- **类型**:() => boolean +- **详情**:可以用异步数据来设置权限,`isDataReady` 用来判断异步数据是否已经加载完毕。 +- **参数**:null +- **返回值**:Boolean + ```js import { access } from '@fesjs/fes'; -console.log(access.isDataReady()) +console.log(access.isDataReady()); ``` #### access.setRole -- **类型**:函数 - -- **详情**:设置当前的角色。 -- **参数**: - - roleId,角色Id,有两种类型: - - String,对应着 `roles` 配置对象中的 `key`。 - - Promise,Promise resolve 的结果应对应着 `roles` 配置对象中的 `key`。 + +- **类型**:函数 +- **详情**:设置当前的角色。 +- **参数**: + - roleId,角色 Id,有两种类型: + - String,对应着 `roles` 配置对象中的 `key`。 + - Promise,Promise resolve 的结果应对应着 `roles` 配置对象中的 `key`。 + ```js import { access } from '@fesjs/fes'; -access.setRole('admin') +access.setRole('admin'); ``` #### access.setAccess -- **类型**:函数 - -- **详情**:设置当前的角色。 -- **参数**: - - accessIds,资源Id数组,有两种类型: - - Array,数组项对应着 `roles` 配置对象中的 `key`。 - - Promise,Promise resolve 的结果应该是`Array`。 + +- **类型**:函数 +- **详情**:设置当前的角色。 +- **参数**: + - accessIds,资源 Id 数组,有两种类型: + - Array,数组项对应着 `roles` 配置对象中的 `key`。 + - Promise,Promise resolve 的结果应该是`Array`。 + ```js import { access } from '@fesjs/fes'; -access.setAccess(['/a', '/b', '/c']) +access.setAccess(['/a', '/b', '/c']); ``` #### access.getAccess -- **类型**:函数 - -- **详情**:返回当前可见的资源列表。 -- **参数**:null + +- **类型**:函数 +- **详情**:返回当前可见的资源列表。 +- **参数**:null ```js import { access } from '@fesjs/fes'; @@ -219,13 +253,13 @@ access.getAccess(); ``` ### useAccess -- **类型**:[composition]((https://v3.cn.vuejs.org/guide/composition-api-introduction.html)) 函数 - -- **详情**:判断某个资源是否可见。 -- **参数**: - - accessId,资源Id -- **返回值**:`ref` - + +- **类型**:[composition](<(https://v3.cn.vuejs.org/guide/composition-api-introduction.html)>) 函数 +- **详情**:判断某个资源是否可见。 +- **参数**: + - accessId,资源 Id +- **返回值**:`ref` + ```vue -``` \ No newline at end of file +```