vue2.x 权限管理实现

由于工作的需求，前后端分离，需要对页面中的资源权限控制，到按钮级别。

开发步骤：

1、制定 资源的命名规则： 系统名—模块名-页面名-功能名

2、收集各个页面所有需要管控按钮的资源，用一个excel来整理

3、让负责各个模块的同事把相关的资源按照如下要求去写：

<Button @click="isEdit = false" v-privilege  privilegeId="sysManage_dept_deptInfo_edit">退出编辑</Button>

备注：

      a. v-privilege 表示是使用的指令

      b. privilegeId 表示资源的唯一标识 

4、定义一个VUE的全局指令privilege，防止其他页面找不到相关指令报错

// 注册一个名为 v-focus 的全局自定义指令
Vue.directive('privilege', {
// 当绑定的元素插入到 DOM 时调用此函数……
  inserted: function (el) {
    // 获取 localStorage 的权限，是一个JSON 对象
        var privilegeMapStr = localStorage.getItem('privilegeMapStr');
        var privilegeMap = JSON.parse(privilegeMapStr);
        // 获取资源的唯一标识
        var privilegeKey = el.getAttribute("privilegeId");
        // 如果没有配置，则表示该权限不被控制
        if(privilegeKey != undefined){
            // key 中有多个资源，当多个资源同时有权限的时候，才能使用该权限
            if(privilegeKey.indexOf("#") >= 0 ){
                var privilegeKeyArray = privilegeKey.split("#");
                var length = privilegeKeyArray.length;
                // 是否有权限，默认是有权限的
                var hasPrivilegeFlag = true;

                for(var i = 0; i < length; i++){
                    var tempPrivilegeKey = privilegeKeyArray[i];
                    // 如果某个资源没有权限，则其余的都没有权限
                    if(privilegeMap[privilegeKey] == undefined){
                        hasPrivilegeFlag = false;
                        break;
                    }
                }

                if(!hasPrivilegeFlag){
                    el.parentNode.removeChild(el);
                }

            }
            // key 中有多个资源，当多个资源至少有一个有权限的时候，就能使用该权限
            else if(privilegeKey.indexOf(",") >= 0 ){
                var privilegeKeyArray = privilegeKey.split(",");
                var length = privilegeKeyArray.length;
                // 是否有权限，默认是没有权限的
                var hasPrivilegeFlag = false;

                for(var i = 0; i < length; i++){
                    var tempPrivilegeKey = privilegeKeyArray[i];
                    // 如果某个资源没有权限，则其余的都没有权限
                    if(privilegeMap[tempPrivilegeKey] != undefined){
                        hasPrivilegeFlag = true;
                        break;
                    }
                }

                if(!hasPrivilegeFlag){
                    el.parentNode.removeChild(el);
                }
            }
            else{
                // 如果没有该资源的权限，则移除节点
                if(privilegeMap[privilegeKey] == undefined){
                    el.parentNode.removeChild(el);
                }
            }
        }
        // 表示权限不被控制
        else{
        }
  }
});

或者写成插件的形式：

/**
检验是否有权限的例子：
 <Button  @click="isEdit = false" v-privilege  privilegeId="sysManage_dept_deptInfo_edit">退出编辑</Button>
@param privilegeId 表示资源的唯一标识
**/
export default {
    // 在指令第一次绑定到元素时调用，只会调用一次。
    bind (el, binding, vnode) {
    },
    // 当绑定的元素插入到 DOM 时调用此函数……
    inserted: function (el) {
        // 获取 localStorage 的权限，是一个JSON 对象
        var privilegeMapStr = localStorage.getItem('privilegeMapStr');
        var privilegeMap = JSON.parse(privilegeMapStr);
        // 获取资源的唯一标识
        var privilegeKey = el.getAttribute("privilegeId");
        // 如果没有配置，则表示该权限不被控制
        if(privilegeKey != undefined){
            // key 中有多个资源，当多个资源同时有权限的时候，才能使用该权限
            if(privilegeKey.indexOf("#") >= 0 ){
                var privilegeKeyArray = privilegeKey.split("#");
                var length = privilegeKeyArray.length;
                // 是否有权限，默认是有权限的
                var hasPrivilegeFlag = true;

                for(var i = 0; i < length; i++){
                    var tempPrivilegeKey = privilegeKeyArray[i];
                    // 如果某个资源没有权限，则其余的都没有权限
                    if(privilegeMap[privilegeKey] == undefined){
                        hasPrivilegeFlag = false;
                        break;
                    }
                }

                if(!hasPrivilegeFlag){
                    el.parentNode.removeChild(el);
                }

            }
            // key 中有多个资源，当多个资源至少有一个有权限的时候，就能使用该权限
            else if(privilegeKey.indexOf(",") >= 0 ){
                var privilegeKeyArray = privilegeKey.split(",");
                var length = privilegeKeyArray.length;
                // 是否有权限，默认是没有权限的
                var hasPrivilegeFlag = false;

                for(var i = 0; i < length; i++){
                    var tempPrivilegeKey = privilegeKeyArray[i];
                    // 如果某个资源没有权限，则其余的都没有权限
                    if(privilegeMap[tempPrivilegeKey] != undefined){
                        hasPrivilegeFlag = true;
                        break;
                    }
                }

                if(!hasPrivilegeFlag){
                    el.parentNode.removeChild(el);
                }
            }
            else{
                // 如果没有该资源的权限，则移除节点
                if(privilegeMap[privilegeKey] == undefined){
                    el.parentNode.removeChild(el);
                }
            }
        }
        // 表示权限不被控制
        else{
        }
    },
    // 在包含指令的组件的 VNode 更新后调用，但可能之前其子组件已更新。
    // 指令的值可能更新或者还没更新，然而可以通过比较绑定的当前值和旧值，来跳过不必要的更新（参考下面的钩子函数）。
    update () {
    },
    // 在指令从元素上解除绑定时调用，只会调用一次。
    unbind (el, binding) {
    }
};