RBAC前端架构-07：自定义指令role、permission实现权限控制

1-自定义指令

1-1.概念

Vue2 允许开发者通过自定义指令来操作 DOM 元素。自定义指令分为两种：

• 全局指令：在整个应用中都可以使用
• 局部指令：仅在特定组件中生效

1-2.自定义指令的生命周期钩子

• bind：指令第一次绑定到元素时调用，只触发一次
• inserted：被绑定元素插入父节点时调用
• update：所在组件的 VNode 更新时调用
• componentUpdated：所在组件的 VNode 及其子 VNode 全部更新后调用
• unbind：指令与元素解绑时调用

1-3.示例

// 定义全局自定义指令 v-show-ifVue.directive('show-if',{bind(el,binding){// binding.value 是指令传入的值el.style.display=binding.value?'':'none';},update(el,binding){// 数据更新时重新判断el.style.display=binding.value?'':'none';}});// 使用方式<template><div v-show-if="isVisible">Hello World</div></template><script>exportdefault{data(){return{isVisible:true// 控制显示/隐藏};}};</script>

2-文件调整

新增frontend-vue2\src\directives\permission.js

作用：

1. 提供了两个自定义指令：v-permission 和 v-role，用于根据用户的权限或角色动态控制 DOM 元素的显示与隐藏
2. 生命周期钩子：bind：首次绑定到元素时执行一次权限检查、update：当模板重新解析（数据更新）时再次执行权限检查
3. 通过 setupPermissionDirective(Vue) 方法将两个指令注册为全局指令

importstorefrom"@/store";// 自定义权限指令，定义bind和update生命周期钩子exportconstpermission={// bind：只调用一次，指令第一次绑定到元素时调用。在这里进行一次权限检查// 参数一：el:令所绑定的DOM元素// 参数二：binding:指令对象，对象中包含指令的相关信息bind(el,binding){checkPermission(el,binding);},// update：指令所在的模版被重新解析时调用(数据更新)update(el,binding){checkPermission(el,binding);},};// 自定义权限指令，定义bind和update生命周期钩子exportconstrole={bind(el,binding){checkRole(el,binding);},update(el,binding){checkRole(el,binding);},};// 权限检查函数functioncheckPermission(el,binding){const{value}=binding;console.log("权限检查"+value);if(value){consthasPermission=store.getters["user/hasPermission"](value);console.log("权限检查结果："+hasPermission);if(!hasPermission){// 使用 display 控制隐藏指令修饰elel.style.display=hasPermission?"":"none";// 从 DOM 中直接移除// el.parentNode && el.parentNode.removeChild(el);}}}// 角色检查函数functioncheckRole(el,binding){const{value}=binding;if(value){consthasRole=store.getters["user/hasRole"](value);// el.style.display = hasRole ? "" : "none";if(!hasRole){// 使用 display 控制隐藏指令修饰elel.style.display=hasRole?"":"none";// 从 DOM 中直接移除// el.parentNode && el.parentNode.removeChild(el);}}}// 传入vue，然后注册自定义指令（Vue2）exportdefaultfunctionsetupPermissionDirective(Vue){// 添加全局指令v-permission：细粒度控制权限,功能级别控制Vue.directive("permission",permission);// 添加全局指令v-roleVue.directive("role",role);}

修改frontend-vue2\src\main.js

importVuefrom"vue";importAppfrom"./App.vue";// 路由组件importrouterfrom"./router";// Vueximportstorefrom"./store";// 引入 Element UIimportElementUIfrom"element-ui";// 引入 Element UI 的样式import"element-ui/lib/theme-chalk/index.css";// Element UI 的样式之后可以再次引入自定义样式，对默认的Element UI 的样式覆盖//import xxxx.css// 引入自定义权限指令importsetupPermissionDirectivefrom"@/directives/permission";// 使用 Element UIVue.use(ElementUI);// 将指令注册到 Vue 实例上setupPermissionDirective(Vue);Vue.config.productionTip=false;newVue({router,store,// 把 store 注入全局render:(h)=>h(App),}).$mount("#app");

后续使用：

<!-- 权限控制 --><el-buttonv-permission="'user:create'">创建用户</el-button><!-- 角色控制 --><el-buttonv-role="'ADMIN'">管理员功能</el-button>