由于工作的需求,前后端分离,需要对页面中的资源权限控制,到按钮级别。
开发步骤:
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) { } };