v-has自定义指令实现按钮权限判断

<a href="https://www.yht7.com/news/139905" style="color: orange;">Vue自定义v-has指令实现按钮权限判断</a>

应用场景：管理员配置权限之后、用户登录时、从接口拿到按钮权限列表、然根据后台有哪些数据判断显示哪些按钮

全局自定义 (<a href="https://www.jb51.net/article/209716.htm">自定义指令源码</a>)

//注册全局自定义指令 'v-focus'
Vue.directive("focus", {
    //当被绑定元素插入到 DOM 中
    inserted: function (el) {
        //聚焦元素
        el.focus()
    }
})

局部自定义

//如果想要注册局部指令、组件中要接收一个 direvtives 的选项
direvtives: {
    focus: {
        //指令的定义
        inserted: function (el) {
            el.focus()
        }
    }
}

一个指令定义对象可以提供如下几个钩子函数（均为可选）

**bind: **只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted: 被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）

update: 所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

componentUpdated: 指令所在组件的VNode及其子VNode全部更新后调用。

**unbind: **只调用一次，指令与元素解绑时调用。

自定义指令v-has

登录接口拿到按钮权限列表，存入本地缓存LOGIN_USER_BUTTON_AUTH中

数据格式如下：

[
    {
        "checked":false,
        "component":"",
        "createTime":"2019-06-29 18:21:06",
        "createUser":"026a564bbfd84861ac4b65393644beef",
        "icon":"",
        "id":"1503273153861066776",
        "name":"今日采集（案卷）",
        "open":"true",
        "parentId":"2328050996633395469",
        "parentName":"首页",
        "permission":"sys:index:vol",
        "sort":103,
        "status":"0",
        "type":"2",
        "updateTime":"2021-01-27 15:51:15",
        "updateUser":"026a564bbfd84861ac4b65393644beef",
        "url":""
    }
]

自定义v-has指令的配置

在utils文件夹下，新建hasPermission.js文件，在index.js中统一导出

const hasPermission = {
    install (Vue, options) {
        Vue.directive("has", {
            inserted: (el, binding, vnode)=>{
                filterGlobalPermission(el, binding, vnode);
            }
        });
    }
};
/**
 * 全局权限控制
 */
export const filterGlobalPermission = (el, binding, vnode) => {
    let permissionList = [];
    let authList = JSON.parse(localStorage.getItem("LOGIN_USER_BUTTON_AUTH") || "[]");
    for (let auth of authList) {
        permissionList.push(auth);
    }
    if (!permissionList.length) {
        el.parentNode.removeChild(el);
        return;
    }
    let permissions = [];
    for (let item of permissionList) {
        permissions.push(item.permission);
    }
    if (!permissions.includes(binding.value)) {
        el.parentNode.removeChild(el);
    }
}
export default hasPermission;

utils文件下的index.js

utils文件夹下的其他js文件也可以统一在index.js里导出

import hasPermission from "./hasPermission"
export { hasPermission }

main.js中引入

import { hasPermission } from "@/utils"
Vue.use(hasPermission)

组件中使用v-has根据按钮权限，判断是否显示该按钮

<el-button v-has=""sys:arch:add"" type="primary" size="mini" icon="el-icon-plus" @click="add("1")">
    新增
</el-button>