Vue-自定义指令实现按钮级别权限(控制按钮显隐)

参考文章
参考了很多文章 有控制disable的 也有从router开始做处理的,也有封装按钮组件的,但是我发现上篇的文章最简单 所以灰常感谢大佬的思路

后台数据接口

示例:

我这里的按钮的权限是三级的权限,就比如删除是在天然氧吧这个页面下的

自定义指令

在main.js中创建v-has指令

//自定义按钮权限指令
Vue.directive('has', {
    inserted: function(el, binding) {
        if (permissionJudge(binding.value)) {
            el.parentNode.removeChild(el);
        }

        function permissionJudge(value) {
            let arr = value.split('-');
            // 此处代表vuex中储存的按钮菜单数据
            let list = store.state.menu;
            let flag = true;
            list.forEach(e => {
                if (e.possessJurisdictions) {
                    //有二级
                    let children = e.possessJurisdictions;
                    children.forEach(e2 => {
                        if (e2.jUrl === arr[0]) {
                        //这一层判断是传过来的value中 先匹配页面的url
                            if (e2.possessJurisdictions.length > 0) {
                                let btnPermissions = e2.possessJurisdictions;
                                btnPermissions.forEach(e3 => {
                                    if (e3.jname == arr[1]) {
                                        flag = false;
                                    }
                                });
                            }
                        }
                    });
                }
            })
            return flag;
        }
    }
});

在页面中使用

我使用的是url-[权限名称]的形式 所以在permissionJudge方法中才会使用字符串切割成数组的方法

其实关键的点在于permissionJudge方法来判断相应页面上是不是匹配的,有没有这个权限,然后再根据DOM原生方法将按钮节点删除 就可以控制了按钮的显隐

这判断方法主要根据后台接口来处理

页面效果

未具有修改权限

具有修改权限