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>