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
accessOnepicess1
- accessOnepicess2
+ accessOnepicess2
```
-
### 匹配规则
#### 全等匹配
-资源的匹配规则默认是使用全等匹配,比如页面 `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
accessOnepicess
@@ -233,34 +267,37 @@ access.getAccess();
```
+
### v-access
-在指令 `v-access` 中传入 `accessId`,则当 `accessId` 拥有权限时显示DOM,当没有权限时隐藏此DOM。
+
+在指令 `v-access` 中传入 `accessId`,则当 `accessId` 拥有权限时显示 DOM,当没有权限时隐藏此 DOM。
```vue
- accessOnepicess
+ accessOnepicess
```
### 组件 Access
+
组件 `Access` 中传入 `accessId`,则当 `accessId` 拥有权限时渲染此组件,当没有权限时隐藏此组件。
```vue
@@ -269,11 +306,11 @@ export default {
-```
\ No newline at end of file
+```