@fesjs/plugin-access ​

介绍 ​

对于前端应用来说,权限就是页面、页面元素是否可见。

资源 ​

Fes.js 把页面、页面元素统一叫做资源,用资源 ID 来识别区分他们:

• 页面的资源 ID 默认是页面的路由 path 。比如页面 pages/a.vue 的路由 path 是 /a。当页面访问 /a 时会渲染当前页面,/a 也就是页面的 accessId。
• 页面元素的资源 ID 没有默认值,需要自定义。

<template>
<access:id="accessId"> accessOnepicess1 </access>
<divv-access="accessId">accessOnepicess2</div>
</template>
<script>
exportdefault{
setup(){
return{
 accessId:'accessOnepicess',
};
},
};
</script>

匹配规则 ​

全等匹配 ​

资源的匹配规则默认是使用全等匹配,比如页面 pages/a.vue 对应路由 path 是 /a,则 /a 就是页面的资源 ID。如果我们设置:

access.setAccess(['/a']);

由于权限列表中包含/a,则表示拥有此页面权限。

模糊匹配 ​

页面@id.vue会映射为动态路由/:id,想匹配此页面有两种办法:

• access.setAccess(['/:id'])
• access.setAccess(['/*'])

第二种是模糊匹配,*表示任意路径。比如角色admin需要全部权限,则可以:

exportdefault{
access:{
roles:{
admin: ['*'],
},
},
};

角色 ​

通常我们会用角色来控制权限,相应的 Fes.js 用角色定义一组资源。当访问 Fes.js 应用时,使用插件提供的 API 设置用户的角色,角色对应的资源才可见,非角色对应的资源不可见。

当然有时候业务比较复杂,角色对应的权限是动态的。不要怕!插件提供粒度更细的 API 来设置当前用户能访问的资源。

启用方式 ​

在 package.json 中引入依赖:

{
"dependencies":{
"@fesjs/fes":"^3.0.0",
"@fesjs/plugin-access":"^3.0.0"
}
}

编译时配置 ​

在执行 fes dev 或者 fes build 时,通过此配置生成运行时的代码,在配置文件.fes.js 中配置:

exportdefault{
access:{
roles:{
admin: ['/','/onepiece','/store'],
},
},
};

roles ​

• 类型:对象

• 默认值:{}

• 详情:

  角色预定义列表。key 是角色 Id ,value是角色 Id 对应的资源列表。

运行时配置 ​

在 app.js 中配置

unAccessHandler ​

• 类型:Function

• 默认值:null

• 详情:

  当进入某个路由时,如果路由对应的页面不属于可见资源列表,则会暂停进入,调用 unAccessHandler 函数。

• 参数

  • router:createRouter 创建的路由实例
  • to: 准备进入的路由
  • from:离开的路由
  • next: next 函数

比如:

exportconst access ={
unAccessHandler({to,next}){
constaccesssIds=accessApi.getAccess();
if (to.path==='/404') {
accessApi.setAccess(accesssIds.concat(['/404']));
returnnext('/404');
}
if (!accesssIds.includes('/403')) {
accessApi.setAccess(accesssIds.concat(['/403']));
}
next('/403');
},
};

noFoundHandler ​

• 类型:Function

• 默认值:null

• 详情:

  当进入某个路由时,如果路由对应的页面不存在,则会调用 noFoundHandler 函数。

• 参数

  • router:createRouter 创建的路由实例
  • to: 准备进入的路由
  • from:离开的路由
  • next: next 函数

比如:

exportconst access ={
noFoundHandler({next}){
constaccesssIds=accessApi.getAccess();
if (!accesssIds.includes('/404')) {
accessApi.setAccess(accesssIds.concat(['/404']));
}
next('/404');
},
};

ignoreAccess ​

• 类型:Array<string>

• 默认值:null

• 详情:

  配置需要忽略权限校验的页面。

比如:

exportconst access ={
ignoreAccess: ['/login'],
};

API ​

access ​

插件 API 通过 @fesjs/fes 导出:

import{access}from'@fesjs/fes';

access.hasAccess ​

• 类型:( accessId: string | number ) => Promise<boolean>
• 详情: 判断某个资源是否可见。
• 参数:
  • accessId,资源 Id
• 返回值:是否有权限

access.isDataReady ​

• 类型:() => boolean
• 详情:可以用异步数据来设置权限,isDataReady 用来判断异步数据是否已经加载完毕。
• 参数:null
• 返回值:Boolean

import{access}from'@fesjs/fes';
console.log(access.isDataReady());

access.setRole ​

• 类型:函数
• 详情:设置当前的角色。
• 参数:
  • roleId,角色 Id,有两种类型:
    • String,对应着 roles 配置对象中的 key。
    • Promise,Promise resolve 的结果应对应着 roles 配置对象中的 key。

import{access}from'@fesjs/fes';
access.setRole('admin');

access.getRole ​

• 类型:函数
• 详情:获取当前的角色。

import{access}from'@fesjs/fes';
access.getRole();

access.setAccess ​

• 类型:函数
• 详情:设置当前的角色。
• 参数:
  • accessIds,资源 Id 数组,有两种类型:
    • Array,数组项对应着 roles 配置对象中的 key。
    • Promise,Promise resolve 的结果应该是Array<accessId>。

import{access}from'@fesjs/fes';
access.setAccess(['/a','/b','/c']);

access.getAccess ​

• 类型:函数
• 详情:返回当前可见的资源列表。
• 参数:null

import{access}from'@fesjs/fes';
access.getAccess();

useAccess ​

• 类型:composition 函数
• 详情:判断某个资源是否可见。
• 参数:
  • accessId,资源 Id
• 返回值:ref

<template>
<divv-if="accessOnepicess">accessOnepicess</div>
</template>
<script>
import{useAccess}from'@fesjs/fes';
exportdefault{
setup(){
constaccessOnepicess=useAccess('/onepiece1');
return{
accessOnepicess,
};
},
};
</script>

v-access ​

在指令 v-access 中传入 accessId,则当 accessId 拥有权限时显示 DOM,当没有权限时隐藏此 DOM。

<template>
<divv-access="accessId">accessOnepicess</div>
</template>
<script>
exportdefault{
setup(){
return{
 accessId:'accessOnepicess',
};
},
};
</script>

组件 Access ​

组件 Access 中传入 accessId,则当 accessId 拥有权限时渲染此组件,当没有权限时隐藏此组件。

<template>
<access:id="accessId"> accessOnepicess </access>
</template>
<script>
exportdefault{
setup(){
return{
 accessId:'accessOnepicess',
};
},
};
</script>