Vue3自定义指令实现按钮权限
一、需求前提
登录成功后，后端直接返回了用户的所有权限（路由权限+按钮权限），在已经实现菜单权限的基础上，实现每个页面的按钮权限，树形数据结构如下：
{
"roles": ["admin"],
"token": "12345678901234567890",
"userInfo": {
"id": "1",
"username": "system",
"nickName": "system",
"email": null,
"phoneNumber": "13131234567",
"sex": "1",
"avatar": null,
"userType": "1"
},
"menus": [
{
"id": "1",
"pid": "0",
"menuName": "home",
"type": 1,
"path": "/home",
"perms": "home",
"icon": "iconfont icon-shouye",
"sortNo": 0,
"selected": null,
"status": "0",
"title": "首页",
"redirect": "",
"visible": "0",
"remark": "首页",
"name": "home",
"meta": {
"title": "首页",
"isHide": false,
"roles": [
"home"
],
"icon": "iconfont icon-shouye",
"tagsViewName": "首页"
},
"children": [],
},
{
"id": "2",
"pid": "0",
"menuName": "screen",
"type": 1,
"path": "/screen",
"perms": "screen",
"icon": "iconfont icon-shuju",
"sortNo": 3,
"selected": null,
"status": "0",
"title": "信息大屏",
"redirect": null,
"visible": "0",
"remark": "信息大屏",
"name": "screen",
"meta": {
"title": "信息大屏",
"isHide": false,
"roles": [
"screen"
],
"icon": "iconfont icon-shuju"
},
"children": [
{
"id": "21",
"pid": "2",
"menuName": "firstScreen",
"type": 1,
"path": "/firstScreen",
"perms": "firstScreen",
"icon": "ele-FirstAidKit",
"sortNo": 0,
"selected": null,
"status": "0",
"title": "大屏1",
"redirect": null,
"visible": "0",
"remark": "大屏1",
"name": "firstScreen",
"meta": {
"title": "大屏1",
"isHide": false,
"roles": [
"firstScreen"
],
"icon": "ele-FirstAidKit"
},
"children": [
{
"id": "211",
"pid": "21",
"menuName": "loadingData",
"type": 2,
"path": "loadingData",
"component": "",
"perms": "screen:firstScreen:loadingData",
"icon": "",
"sortNo": 0,
"selected": null,
"status": "0",
"title": "同步数据",
"redirect": null,
"visible": "0",
"remark": "同步数据",
"name": "loadingData",
"meta": {
"title": "同步数据",
"isHide": false,
"roles": [
"screen:firstScreen:loadingData"
],
"icon": ""
},
"children": [],
},
],
},
],
},
],
}
二、实现思路
获取当前路由页面的权限，筛选出当前路由页面拥有的所有按钮权限，判断某个按钮是否拥有权限，没有权限就通过css设置为display:none
三、具体实现步骤(vue3+ts)
1.在src文件下新建directive文件，在directive文件中新建btnPermission.ts文件
具体目录结构如下：
2.在btnPermission.ts中
import type { App } from 'vue';
import { useUserInfo } from '/@/stores/userInfo';
/**
* 按钮权限指令-无按钮权限不显示
* @directive 单个按钮权限验证（v-btnPermission="xxx"）
*/
export function btnPermission(app: App) {
app.directive('btnPermission', {
mounted(el, binding) {
// 1.从用户信息pinia中拿到用户信息（用户权限）
const stores = useUserInfo();
// 2.找到当前路由页面拥有的所有权限
const btnArr = filterPath(stores.userInfos.menus, window.location.hash.slice(1))
// 3.判断是否有当前按钮的权限，没有直接不显示
if (!btnArr.find((item: any) => item.name == binding.value)) {
el.style.display = 'none'
}
},
});
}
//递归工具函数---判断当前节点是否匹配目标路由
function filterPath(tree: any, path: string) {
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.path == path) {
return node.children;
} else {
if (node.children && node.children.length > 0) {
const result: any = filterPath(node.children, path);
if (result) {
return result;
}
}
}
}
}3.在directive文件下的index.ts中，注册自定义指令
import type { App } from 'vue';
import { btnPermission } from '/@/directive/btnPermission';
/**
* 导出指令方法：v-xxx
* @methods btnPermission 按钮权限指令，用法：v-btnPermission
*/
export function directive(app: App) {
// 按钮权限指令
btnPermission(app)
}
4.在目标页面中使用
// v-btnPermission="'按钮权限的name值'"，真实项目中的字段取用自行与后端协商
同步数据