fes.js/docs/zh/reference/plugin/plugins/access.md

@webank/fes-plugin-access

介绍

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

资源

Fes.js 把页面、页面元素统一叫做资源，每个资源都有 accessId：

• 页面的 accessId 默认是页面的路由 path 。比如页面 pages/a.vue 的路由 path 是 /a。当页面访问 /a 时会渲染当前页面，/a 也就是页面的 accessId。

• 页面元素的 accessId 没有默认值，我们可以自定义。

<template>
    <access :id="accessId"> accessOnepicess1 <input /> </access>
    <div v-access="accessId"> accessOnepicess2 </div>
</template>
<script>
export default {
    setup(){
        return {
            accessId: 'accessOnepicess'
        }
    }
}
</script>

角色

Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。

当然有时候业务比较复杂，角色不能在前端应用中预先定义，而是用户自定义的，储存在数据库中。不要怕！插件也提供粒度更细的 API 来控制当前用户能访问的资源。

启用方式

在 package.json 中引入依赖：

{
    "dependencies": {
        "@webank/fes": "^2.0.0",
        "@webank/fes-plugin-access": "^2.0.0"
    },
}

配置

编译配置

在 .fes.js 中配置：

export default {
    access: {
        roles: {
            admin: ["/", "/onepiece", '/store']
        }
    }
}

运行时配置

在 app.js 中配置：

export const access = {
    noAccessHandler({ router, to, from, next}) {
        console.log("被拦截");
        next(false);
    }
};

API

函数

指令

组件