Vue自定义指令完成按钮级别的权限判断

权限指令,对按钮权限的控制

1.登陆成功后，获取后台返回全部的按钮权限,存到sessionStorage中( 也能够存到vuex )

2.在main.js中自定义指令

3.定义指令，若是用户含有此按钮权限，则在页面显示出来( v-has绑定进行逻辑判断 )

---

登陆成功后，获取后台返回全部的按钮权限,存到sessionStorage中

// 4.5获取当前登陆用户角色权限列表 这个方法在登陆中调用
roleUserInfo() { this.$ajax.get("/role/permissionlist").then(res => {  sessionStorage.setItem("loginVal", JSON.stringify(res.data.data)); setTimeout(() => { window.location.reload(); }, 50); }); }

在main.js中自定义指令

//inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不必定已被插入文档中) //若是bind获取不到el.parentNode //试试把 bind 改成 inserted
const has = Vue.directive("has", {  inserted: function(el, binding) { console.log(binding,"w") // 获取按钮权限// 获取按钮权限
        if (!Vue.prototype.$_has(binding.value)) { el.parentNode.removeChild(el); } } }); //// 权限检查方法（且把该方法添加到vue原型中）
Vue.prototype.$_has = function(value) { let isExit = false;  let buttonpermsStr = JSON.parse(sessionStorage.getItem("loginVal")); if (buttonpermsStr === undefined || buttonpermsStr=== null) { return false; } for (let i = 0; i < buttonpermsStr.length; i++) { let buttonpermsStrId = buttonpermsStr[i]
　　　　　　if (buttonpermsStrId.code == value) {//要拿数据中不变的而且可使用的字段进行判断，不可使用id isExit = true; break; } } return isExit; }; export { has };

定义指令，若是用户含有此按钮权限，则在页面显示出来( v-has绑定进行逻辑判断 )

<!-- 在按钮上直接写上v-has="后台返回的按钮id" -->
<Button v-has="'add'">查看</Button>