在Vue项目中使用自定义指令来解决按钮级权限问题

前言：

• 最通俗易懂的方法当然是我们使用v-if来实现，但是这里有一个弊端，就是每个页面都要获取一次权限信息，有点小麻烦。
• 因此我们来点小魔法，接下来我们将封装自定义指令，来实现按钮级的权限控制。

新建 permissions.js 文件：

import Vue from 'vue';
// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export 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 = [2,3,4,5];
    sessionStorage.setItem("permissionData", arr)  // 缓存权限数据

 使用

 

    <!-- v-btn-key="1" -->
    <button v-btn-key="2">按钮二</button>
    <button v-btn-key="3">按钮三</button>