2021-03-05 19:10:39 +08:00
|
|
|
|
# @fesjs/plugin-access
|
|
|
|
|
|
|
|
|
|
## 介绍
|
|
|
|
|
对于前端应用来说,权限就是页面、页面元素是否可见。
|
|
|
|
|
|
|
|
|
|
### 资源
|
2022-04-20 10:35:16 +08:00
|
|
|
|
Fes.js 把页面、页面元素统一叫做资源,用资源 ID 来识别区分他们:
|
|
|
|
|
- 页面的资源 ID 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面,`/a` 也就是页面的 `accessId`。
|
2021-03-05 19:10:39 +08:00
|
|
|
|
|
2022-04-20 10:35:16 +08:00
|
|
|
|
- 页面元素的资源 ID 没有默认值,需要自定义。
|
2021-03-05 19:10:39 +08:00
|
|
|
|
```vue
|
|
|
|
|
<template>
|
2022-05-16 16:34:55 +08:00
|
|
|
|
<access :id="accessId"> accessOnepicess1 </access>
|
2021-03-05 19:10:39 +08:00
|
|
|
|
<div v-access="accessId"> accessOnepicess2 </div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
setup(){
|
|
|
|
|
return {
|
|
|
|
|
accessId: 'accessOnepicess'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
```
|
|
|
|
|
|
2021-09-14 17:34:42 +08:00
|
|
|
|
|
|
|
|
|
### 匹配规则
|
|
|
|
|
|
|
|
|
|
#### 全等匹配
|
|
|
|
|
资源的匹配规则默认是使用全等匹配,比如页面 `pages/a.vue` 对应路由 `path` 是 `/a`,则 `/a` 就是页面的资源ID。如果我们设置:
|
|
|
|
|
```js
|
|
|
|
|
access.setAccess(['/a'])
|
|
|
|
|
```
|
|
|
|
|
由于权限列表中包含`/a`,则表示拥有此页面权限。
|
|
|
|
|
|
|
|
|
|
#### 模糊匹配
|
|
|
|
|
页面`@id.vue`会映射为动态路由`/:id`,想匹配此页面有两种办法:
|
|
|
|
|
- **access.setAccess(['/:id'])**
|
|
|
|
|
- **access.setAccess(['/*'])**
|
|
|
|
|
|
|
|
|
|
第二种是模糊匹配,`*`表示任意路径。比如角色`admin`需要全部权限,则可以:
|
|
|
|
|
```js
|
|
|
|
|
export default {
|
|
|
|
|
access: {
|
|
|
|
|
roles: {
|
|
|
|
|
admin: ["*"]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
2021-03-05 19:10:39 +08:00
|
|
|
|
### 角色
|
2021-09-14 17:34:42 +08:00
|
|
|
|
通常我们会用角色来控制权限,相应的Fes.js 用角色定义一组资源。当访问 Fes.js 应用时,使用插件提供的 API 设置用户的角色,角色对应的资源才可见,非角色对应的资源不可见。
|
|
|
|
|
|
2021-03-05 19:10:39 +08:00
|
|
|
|
|
2021-09-14 17:34:42 +08:00
|
|
|
|
当然有时候业务比较复杂,角色对应的权限是动态的。不要怕!插件提供粒度更细的 API 来设置当前用户能访问的资源。
|
2021-03-05 19:10:39 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 启用方式
|
|
|
|
|
在 `package.json` 中引入依赖:
|
|
|
|
|
```json
|
|
|
|
|
{
|
|
|
|
|
"dependencies": {
|
|
|
|
|
"@fesjs/fes": "^2.0.0",
|
|
|
|
|
"@fesjs/plugin-access": "^2.0.0"
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-04-18 13:31:47 +08:00
|
|
|
|
## 编译时配置
|
2021-03-05 19:10:39 +08:00
|
|
|
|
在执行 `fes dev` 或者 `fes build` 时,通过此配置生成运行时的代码,在配置文件`.fes.js` 中配置:
|
|
|
|
|
```js
|
|
|
|
|
export default {
|
|
|
|
|
access: {
|
|
|
|
|
roles: {
|
|
|
|
|
admin: ["/", "/onepiece", '/store']
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-04-18 13:31:47 +08:00
|
|
|
|
### roles
|
2021-03-05 19:10:39 +08:00
|
|
|
|
- **类型**:对象
|
|
|
|
|
|
|
|
|
|
- **默认值**:`{}`
|
|
|
|
|
|
|
|
|
|
- **详情**:
|
|
|
|
|
|
|
|
|
|
角色预定义列表。`key` 是角色 Id ,`value`是角色 Id 对应的资源列表。
|
|
|
|
|
|
|
|
|
|
|
2022-04-18 13:31:47 +08:00
|
|
|
|
## 运行时配置
|
2021-03-05 19:10:39 +08:00
|
|
|
|
在 `app.js` 中配置
|
|
|
|
|
|
2022-04-18 13:31:47 +08:00
|
|
|
|
### unAccessHandler
|
2021-03-05 19:10:39 +08:00
|
|
|
|
- **类型**:`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 }) {
|
|
|
|
|
const accesssIds = accessApi.getAccess();
|
|
|
|
|
if (to.path === '/404') {
|
|
|
|
|
accessApi.setAccess(accesssIds.concat(['/404']));
|
|
|
|
|
return next('/404');
|
|
|
|
|
}
|
|
|
|
|
if (!accesssIds.includes('/403')) {
|
|
|
|
|
accessApi.setAccess(accesssIds.concat(['/403']));
|
|
|
|
|
}
|
|
|
|
|
next('/403');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
2022-04-18 13:31:47 +08:00
|
|
|
|
### noFoundHandler
|
2021-03-05 19:10:39 +08:00
|
|
|
|
- **类型**:`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 }) {
|
|
|
|
|
const accesssIds = accessApi.getAccess();
|
|
|
|
|
if (!accesssIds.includes('/404')) {
|
|
|
|
|
accessApi.setAccess(accesssIds.concat(['/404']));
|
|
|
|
|
}
|
|
|
|
|
next('/404');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
### access
|
|
|
|
|
插件 API 通过 `@fesjs/fes` 导出:
|
|
|
|
|
```js
|
|
|
|
|
import { access } from '@fesjs/fes'
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### access.hasAccess
|
2022-05-16 16:34:55 +08:00
|
|
|
|
- **类型**:( accessId: string | number ) => Promise\<boolean\>
|
2021-03-05 19:10:39 +08:00
|
|
|
|
|
|
|
|
|
- **详情**: 判断某个资源是否可见。
|
|
|
|
|
- **参数**:
|
|
|
|
|
- accessId,资源Id
|
2022-05-10 15:39:55 +08:00
|
|
|
|
- **返回值**:是否有权限
|
2021-03-05 19:10:39 +08:00
|
|
|
|
|
|
|
|
|
#### access.isDataReady
|
2022-05-10 15:39:55 +08:00
|
|
|
|
- **类型**:() => boolean
|
2021-03-05 19:10:39 +08:00
|
|
|
|
|
|
|
|
|
- **详情**:可以用异步数据来设置权限,`isDataReady` 用来判断异步数据是否已经加载完毕。
|
|
|
|
|
- **参数**:null
|
|
|
|
|
- **返回值**:Boolean
|
|
|
|
|
```js
|
|
|
|
|
import { access } from '@fesjs/fes';
|
|
|
|
|
console.log(access.isDataReady())
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### access.setRole
|
|
|
|
|
- **类型**:函数
|
|
|
|
|
|
|
|
|
|
- **详情**:设置当前的角色。
|
|
|
|
|
- **参数**:
|
|
|
|
|
- roleId,角色Id,有两种类型:
|
|
|
|
|
- String,对应着 `roles` 配置对象中的 `key`。
|
|
|
|
|
- Promise,Promise resolve 的结果应对应着 `roles` 配置对象中的 `key`。
|
|
|
|
|
```js
|
|
|
|
|
import { access } from '@fesjs/fes';
|
2021-12-14 11:42:49 +08:00
|
|
|
|
access.setRole('admin')
|
2021-03-05 19:10:39 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### access.setAccess
|
|
|
|
|
- **类型**:函数
|
|
|
|
|
|
|
|
|
|
- **详情**:设置当前的角色。
|
|
|
|
|
- **参数**:
|
|
|
|
|
- accessIds,资源Id数组,有两种类型:
|
|
|
|
|
- Array,数组项对应着 `roles` 配置对象中的 `key`。
|
|
|
|
|
- Promise,Promise resolve 的结果应该是`Array<accessId>`。
|
|
|
|
|
```js
|
|
|
|
|
import { access } from '@fesjs/fes';
|
|
|
|
|
access.setAccess(['/a', '/b', '/c'])
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### access.getAccess
|
|
|
|
|
- **类型**:函数
|
|
|
|
|
|
|
|
|
|
- **详情**:返回当前可见的资源列表。
|
|
|
|
|
- **参数**:null
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import { access } from '@fesjs/fes';
|
|
|
|
|
access.getAccess();
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### useAccess
|
|
|
|
|
- **类型**:[composition]((https://v3.cn.vuejs.org/guide/composition-api-introduction.html)) 函数
|
|
|
|
|
|
|
|
|
|
- **详情**:判断某个资源是否可见。
|
|
|
|
|
- **参数**:
|
|
|
|
|
- accessId,资源Id
|
|
|
|
|
- **返回值**:`ref`
|
|
|
|
|
|
|
|
|
|
```vue
|
|
|
|
|
<template>
|
|
|
|
|
<div v-if="accessOnepicess">accessOnepicess</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import { useAccess } from '@fesjs/fes';
|
|
|
|
|
export default {
|
|
|
|
|
setup(){
|
|
|
|
|
const accessOnepicess = useAccess('/onepiece1');
|
|
|
|
|
return {
|
|
|
|
|
accessOnepicess
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
```
|
|
|
|
|
### v-access
|
2021-09-14 17:34:42 +08:00
|
|
|
|
在指令 `v-access` 中传入 `accessId`,则当 `accessId` 拥有权限时显示DOM,当没有权限时隐藏此DOM。
|
2022-05-16 16:34:55 +08:00
|
|
|
|
|
2021-03-05 19:10:39 +08:00
|
|
|
|
```vue
|
|
|
|
|
<template>
|
2021-09-14 17:34:42 +08:00
|
|
|
|
<div v-access="accessId"> accessOnepicess </div>
|
2021-03-05 19:10:39 +08:00
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
setup(){
|
|
|
|
|
return {
|
|
|
|
|
accessId: 'accessOnepicess'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 组件 Access
|
|
|
|
|
组件 `Access` 中传入 `accessId`,则当 `accessId` 拥有权限时渲染此组件,当没有权限时隐藏此组件。
|
2022-05-16 16:34:55 +08:00
|
|
|
|
|
2021-03-05 19:10:39 +08:00
|
|
|
|
```vue
|
|
|
|
|
<template>
|
2021-09-14 17:34:42 +08:00
|
|
|
|
<access :id="accessId"> accessOnepicess </access>
|
2021-03-05 19:10:39 +08:00
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
setup(){
|
|
|
|
|
return {
|
|
|
|
|
accessId: 'accessOnepicess'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
```
|