"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[484],{2639:(s,n,a)=>{a.r(n),a.d(n,{data:()=>p});const p={key:"v-2fe128e7",path:"/reference/plugin/plugins/access.html",title:"@fesjs/plugin-access",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[{level:3,title:"资源",slug:"资源",children:[]},{level:3,title:"匹配规则",slug:"匹配规则",children:[]},{level:3,title:"角色",slug:"角色",children:[]}]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"编译时配置",slug:"编译时配置",children:[{level:3,title:"roles",slug:"roles",children:[]}]},{level:2,title:"运行时配置",slug:"运行时配置",children:[{level:3,title:"unAccessHandler",slug:"unaccesshandler",children:[]},{level:3,title:"noFoundHandler",slug:"nofoundhandler",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"access",slug:"access",children:[]},{level:3,title:"useAccess",slug:"useaccess",children:[]},{level:3,title:"v-access",slug:"v-access",children:[]},{level:3,title:"组件 Access",slug:"组件-access",children:[]}]}],filePathRelative:"reference/plugin/plugins/access.md",git:{updatedTime:1653450562e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5364:(s,n,a)=>{a.r(n),a.d(n,{default:()=>w});var p=a(6252);const e=(0,p.uE)('

@fesjs/plugin-access

介绍

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

资源

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

<template>\n    <access :id="accessId"> accessOnepicess1 <input /> </access>\n    <div v-access="accessId"> accessOnepicess2 </div>\n</template>\n<script>\nexport default {\n    setup(){\n        return {\n            accessId: 'accessOnepicess'\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13

匹配规则

全等匹配

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

access.setAccess(['/a'])\n
1

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

模糊匹配

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

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

export default {\n    access: {\n        roles: {\n            admin: ["*"]\n        }\n    }\n}\n
1
2
3
4
5
6
7

角色

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

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

启用方式

在 package.json 中引入依赖：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-access": "^2.0.0"\n    },\n}\n
1
2
3
4
5
6

编译时配置

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

export default {\n    access: {\n        roles: {\n            admin: ["/", "/onepiece", '/store']\n        }\n    }\n}\n
1
2
3
4
5
6
7

roles

运行时配置

在 app.js 中配置

unAccessHandler

',31),t=(0,p.uE)("

  • 类型：Function

  • 默认值：null

  • 详情：

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

    • ",3),c=(0,p._)("p",null,[(0,p._)("strong",null,"参数")],-1),o=(0,p._)("li",null,"router：createRouter 创建的路由实例",-1),l=(0,p._)("li",null,"to： 准备进入的路由",-1),u=(0,p._)("li",null,"from：离开的路由",-1),i=(0,p.Uk)("next： "),r={href:"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",target:"_blank",rel:"noopener noreferrer"},k=(0,p.Uk)("next函数"),d=(0,p.uE)('

    比如：

    export const access = {\n    unAccessHandler({ to, next }) {\n        const accesssIds = accessApi.getAccess();\n        if (to.path === '/404') {\n            accessApi.setAccess(accesssIds.concat(['/404']));\n            return next('/404');\n        }\n        if (!accesssIds.includes('/403')) {\n            accessApi.setAccess(accesssIds.concat(['/403']));\n        }\n        next('/403');\n    }\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    noFoundHandler

    ',3),g=(0,p.uE)("

  • 类型：Function

  • 默认值：null

  • 详情：

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

    • ",3),b=(0,p._)("p",null,[(0,p._)("strong",null,"参数")],-1),m=(0,p._)("li",null,"router：createRouter 创建的路由实例",-1),h=(0,p._)("li",null,"to： 准备进入的路由",-1),v=(0,p._)("li",null,"from：离开的路由",-1),f=(0,p.Uk)("next： "),y={href:"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",target:"_blank",rel:"noopener noreferrer"},j=(0,p.Uk)("next函数"),x=(0,p.uE)('

    比如：

    export const access = {\n    noFoundHandler({ next }) {\n        const accesssIds = accessApi.getAccess();\n        if (!accesssIds.includes('/404')) {\n            accessApi.setAccess(accesssIds.concat(['/404']));\n        }\n        next('/404');\n    }\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    API

    access

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

    import { access } from '@fesjs/fes'\n
    1

    access.hasAccess

    access.isDataReady

    import { access } from '@fesjs/fes';\nconsole.log(access.isDataReady())\n
    1
    2

    access.setRole

    import { access } from '@fesjs/fes';\naccess.setRole('admin')\n
    1
    2

    access.setAccess

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

    access.getAccess

    import { access } from '@fesjs/fes';\naccess.getAccess();\n
    1
    2

    useAccess

    <template>\n    <div v-if="accessOnepicess">accessOnepicess</div>\n</template>\n<script>\nimport { useAccess } from '@fesjs/fes';\nexport default {\n    setup(){\n        const accessOnepicess = useAccess('/onepiece1');\n        return {\n            accessOnepicess\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    v-access

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

    <template>\n    <div v-access="accessId"> accessOnepicess </div>\n</template>\n<script>\nexport default {\n    setup(){\n        return {\n            accessId: 'accessOnepicess'\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    组件 Access

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

    <template>\n    <access :id="accessId"> accessOnepicess </access>\n</template>\n<script>\nexport default {\n    setup(){\n        return {\n            accessId: 'accessOnepicess'\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ',29),A={},w=(0,a(3744).Z)(A,[["render",function(s,n){const a=(0,p.up)("OutboundLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[e,(0,p._)("ul",null,[t,(0,p._)("li",null,[c,(0,p._)("ul",null,[o,l,u,(0,p._)("li",null,[i,(0,p._)("a",r,[k,(0,p.Wm)(a)])])])])]),d,(0,p._)("ul",null,[g,(0,p._)("li",null,[b,(0,p._)("ul",null,[m,h,v,(0,p._)("li",null,[f,(0,p._)("a",y,[j,(0,p.Wm)(a)])])])])]),x],64)}]])},3744:(s,n)=>{n.Z=(s,n)=>{const a=s.__vccOpts||s;for(const[s,p]of n)a[s]=p;return a}}}]);