VUE自定义指令实现按钮级权限控制

项目中权限精确到按钮级别，后台返回用户拥有的按钮

// 新建 buttonPermission.js 文件
 
import Vue from "vue";

const HAS_PER = Vue.directive("has",{
    inserted:function (el,binding,vnode) {
        if (!Vue.prototype.$HAS(binding.value)) {
            el.remove();
        }
    }
})

Vue.prototype.$HAS = function (value) {
    let isHas = false;
    let buttonPermission = JSON.parse(localStorage.getItem("buttonPermission"));
    if (buttonPermission === undefined || buttonPermission === null) {
        return false;
    }
    try {
        let targetArr = value.split(",");
        for (let i = 0;i < targetArr.length;i++) {
            if (buttonPermission.includes(targetArr[i])) {
                isHas = true;
                break;
            }
        }
        return isHas;
    } catch {
        console.log('权限按钮出错了');
        isHas = false;
        return isHas;
    }
}

export {
    HAS_PER,
}

在main.js文件中

import HAS_PER from "@/utils/buttonPermission";

使用 v-has即可

<el-button type="text" v-has="'library:symbolManage:symbol: recovery'">恢复</el-button>
也可以是多权限控制，取决于指令的逻辑
<el-button type="text" v-has="'library:symbolManage:symbol: recovery,library:symbolManage:symbol: recovery'">恢复</el-button>