v2-permission
快速上手
安装
npm install v2-permission引入
import Vue from 'vue';
import permissions from 'v2-permission';
Vue.use(permissions, {
// 权限 API
getPermissionsApi: async () => fetch(`/api.json?t=${new Date().getTime()}`).then((res) => res.json()),
});使用
<!-- 同时存在多个权限 -->
<button v-permission="['orders::add', 'orders::update']">新增&编辑</button>
<!-- 单个校验 -->
<button v-permission="'orders::delete'">删除</button>API
options
| 参数名 | 类型 | 必填 | 描述 |
|---|---|---|---|
getPermissionsApi |
Function |
是 | 获取权限的方法 |
checkPermission |
Function |
否 | 检查权限的方法 |
name |
String |
否 | 自定义指令名称 |
className |
String |
否 | 自定义指令隐藏时添加的 class 名称 |
详细内容
期望接口返回值
如果接口不确定是否能够给你这种格式，你可以选择转一下，或者自己写一个checkPermission。
{
"orders": [
"add",
"update",
"delete",
"query",
"detail",
"enable",
"disable"
]
}自定义 checkPermission
你如果需要自定义需求，可以在 Use 时传入
checkPermission这样就会将内置的内容覆盖掉，注释如下，接受 value，返回 Boolean。
/**
* @name checkPermission
* @param { String | Array } value 权限指令的 value
* @returns { Boolean } 是否有权限
*/