blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity

docs: 优化 access docs 文档

Browse Source
This commit is contained in:
winixt 2023-01-10 10:41:06 +08:00
parent 48d5f92ce7
commit 773082f8e1
3 changed files with 230 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.eslintrc.js
View File

@ -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,

39
docs/.vuepress/configs/sidebar/zh.ts
View File

@ -1,14 +1,11 @@
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',
],
children: ['/guide/README.md', '/guide/getting-started.md'],
},
{
// isGroup: true,
@ -24,26 +21,18 @@ export const zh: SidebarConfig = {
'/guide/template.md',
'/guide/mock.md',
'/guide/upgrade3.md',
]
],
},
{
// isGroup: true,
text: '样式和资源文件',
children: [
'/guide/image.md',
'/guide/css.md',
'/guide/public.md',
]
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'
'/guide/contributing.md',
'/guide/faq.md',
],
'/reference/config/': ['/reference/config/README.md'],
'/reference/api/': ['/reference/api/README.md'],
'/reference/plugin/': [
'/reference/plugin/README.md',
{
@ -65,18 +54,14 @@ export const zh: SidebarConfig = {
'/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'
],
children: ['/reference/plugin/dev/README.md', '/reference/plugin/dev/api.md'],
},
],
'/reference/cli/': [
'/reference/cli/README.md',
],
}
'/reference/cli/': ['/reference/cli/README.md'],
};

135
docs/reference/plugin/plugins/access.md
View File

@ -1,13 +1,16 @@
# @fesjs/plugin-access
## 介绍
对于前端应用来说，权限就是页面、页面元素是否可见。
### 资源
Fes.js 把页面、页面元素统一叫做资源，用资源 ID 来识别区分他们：
- 页面的资源 ID 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。
Fes.js 把页面、页面元素统一叫做资源，用资源 ID 来识别区分他们：
- 页面的资源 ID 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。
- 页面元素的资源 ID 没有默认值，需要自定义。
```vue
<template>
<access :id="accessId"> accessOnepicess1 </access>
@ -17,91 +20,99 @@ Fes.js 把页面、页面元素统一叫做资源，用资源 ID 来识别区分
export default {
setup() {
return {
accessId: 'accessOnepicess'
}
}
}
accessId: 'accessOnepicess',
};
},
};
</script>
```
### 匹配规则
#### 全等匹配
资源的匹配规则默认是使用全等匹配，比如页面 `pages/a.vue` 对应路由 `path` 是 `/a`，则 `/a` 就是页面的资源 ID。如果我们设置：
```js
access.setAccess(['/a'])
access.setAccess(['/a']);
```
由于权限列表中包含`/a`，则表示拥有此页面权限。
#### 模糊匹配
页面`@id.vue`会映射为动态路由`/:id`，想匹配此页面有两种办法：
- **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']
}
}
}
admin: ['/', '/onepiece', '/store'],
},
},
};
```
### roles
- **类型**：对象
- **类型**：对象
- **默认值**：`{}`
- **详情**：
角色预定义列表。`key` 是角色 Id ，`value`是角色 Id 对应的资源列表。
## 运行时配置
在 `app.js` 中配置
### unAccessHandler
- **类型**：`Function`
- **类型**：`Function`
- **默认值**：`null`
- **详情**：
当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
- **参数**
- router：createRouter 创建的路由实例
- to： 准备进入的路由
@ -109,6 +120,7 @@ export default {
- 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,19 +133,19 @@ export const access = {
accessApi.setAccess(accesssIds.concat(['/403']));
}
next('/403');
}
},
};
```
### noFoundHandler
- **类型**：`Function`
- **类型**：`Function`
- **默认值**：`null`
- **详情**：
当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
- **参数**
- router：createRouter 创建的路由实例
- to： 准备进入的路由
@ -141,6 +153,7 @@ export const access = {
- 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,67 +162,88 @@ export const access = {
accessApi.setAccess(accesssIds.concat(['/404']));
}
next('/404');
}
},
};
```
### ignoreAccess
- **类型**：`Array<string>`
- **默认值**：`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\<boolean\>
- **类型**：( accessId: string | number ) => Promise\<boolean\>
- **详情**: 判断某个资源是否可见。
- **参数**：
- accessId，资源 Id
- **返回值**：是否有权限
#### access.isDataReady
- **类型**：() => 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`。
```js
import { access } from '@fesjs/fes';
access.setRole('admin')
access.setRole('admin');
```
#### access.setAccess
- **类型**：函数
- **类型**：函数
- **详情**：设置当前的角色。
- **参数**：
- accessIds，资源 Id 数组，有两种类型：
- Array，数组项对应着 `roles` 配置对象中的 `key`。
- Promise，Promise resolve 的结果应该是`Array<accessId>`。
```js
import { access } from '@fesjs/fes';
access.setAccess(['/a', '/b', '/c'])
access.setAccess(['/a', '/b', '/c']);
```
#### access.getAccess
- **类型**：函数
- **类型**：函数
- **详情**：返回当前可见的资源列表。
- **参数**：null
@ -219,8 +253,8 @@ access.getAccess();
```
### useAccess
- **类型**：[composition]((https://v3.cn.vuejs.org/guide/composition-api-introduction.html)) 函数
- **类型**：[composition](<(https://v3.cn.vuejs.org/guide/composition-api-introduction.html)>) 函数
- **详情**：判断某个资源是否可见。
- **参数**：
- accessId，资源 Id
@ -236,13 +270,15 @@ export default {
setup() {
const accessOnepicess = useAccess('/onepiece1');
return {
accessOnepicess
}
}
}
accessOnepicess,
};
},
};
</script>
```
### v-access
在指令 `v-access` 中传入 `accessId`，则当 `accessId` 拥有权限时显示 DOM，当没有权限时隐藏此 DOM。
```vue
@ -253,14 +289,15 @@ export default {
export default {
setup() {
return {
accessId: 'accessOnepicess'
}
}
}
accessId: 'accessOnepicess',
};
},
};
</script>
```
### 组件 Access
组件 `Access` 中传入 `accessId`，则当 `accessId` 拥有权限时渲染此组件，当没有权限时隐藏此组件。
```vue
@ -271,9 +308,9 @@ export default {
export default {
setup() {
return {
accessId: 'accessOnepicess'
}
}
}
accessId: 'accessOnepicess',
};
},
};
</script>
```