在很多后台管理系统中，常常需要做按钮权限控制。
当然我们可以使用v-if来实现，不过这样做，每个页面都要获取一次权限信息，代码往往很冗余。
接下来我们将封装自定义指令，来实现按钮级的权限控制。
一、先定义检测函数
检测可以显示的权限数据
// 检测传入的元素key是否可以显示function checkKey(key) {// 获取权限数组let permissionData = sessionStorage.getItem("permissionData") ? sessionStorage.getItem("permissionData") : [] ;//如果传入的元素key不在权限数组里，则不可显示let index = permissionData.indexOf(key)if(index > -1) {return true;}else{return false;}}
二、创建自定义指令
创建自定义指令并删除不显示的按钮
import Vue from 'vue';// 检测是否有权限// 使用Vue.directive声明自定义指令btn-keyexport const buttonPermissions = Vue.directive('btn-key',{/*** inserted：被绑定元素插入父节点时调用 * el：指令所绑定的元素，可以用来直接操作 DOM* binding.value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。*/inserted(el,binding){let buttonKey = binding.value;// 代表某个元素需要通过权限验证if(buttonKey){let key = checkKey(buttonKey)if(!key){//没有权限el.remove() //删除按钮}}else{throw new Error('缺少唯一指令')}},})
三、封装
基于封装原则，将其封装
新建 permissions.js 文件
import Vue from 'vue';// 检测是否有权限// 使用Vue.directive声明自定义指令btn-keyexport const buttonPermissions = Vue.directive('btn-key',{/*** inserted：被绑定元素插入父节点时调用 * el：指令所绑定的元素，可以用来直接操作 DOM* binding.value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。*/inserted(el,binding){let buttonKey = binding.value;// 代表某个元素需要通过权限验证if(buttonKey){let key = checkKey(buttonKey)if(!key){//没有权限el.remove() //删除按钮}}else{throw new Error('缺少唯一指令')}},}) // 检测传入的元素key是否可以显示function checkKey(key) {// 获取权限数组let permissionData = sessionStorage.getItem("permissionData") ? sessionStorage.getItem("permissionData") : [] ;//如果传入的元素key不在权限数组里，则不可显示let index = permissionData.indexOf(key)if(index > -1) {return true;}else{return false;}}
四、使用方式
1、全局挂载
在 main.js 文件中引入
import {} from './common/permissions'
2、登录成功后、将权限数组缓存
//模拟权限数组let arr = [1,3,5,7];sessionStorage.setItem("permissionData", arr) // 缓存权限数据
3、使用方式
<!-- v-btn-key="2" 值为权限数组对应数据 这里就不过多展示 --><button v-btn-key="2">按钮二</button><button v-btn-key="3">按钮三</button>
