經常做中后臺系統，此類系統的權限是比較重要，拿自己做過的一些專案做個筆記，
Vue實作的中后臺管理系統，按鈕操作權限的空置一般都是通過自定義指令Vue.directive，
<el-button v-has="fq-pms" type="primary">按鈕</el-button>
通常我們會把從后臺請求過來的資料存貯到Vuex或localStorage，接下來我們先注冊一個全域自定義指令并監控它
Vue.directive('has',{
bind:function(el,binding){
const permissons = ['lcj'] //指令串列
if (has(binding.value, permissions)) {
el.parentNode.removeChild(el);//呼叫元素父級洗掉，有時候父元素未渲染出來可以把bind換成inserted
}
}
})
has函式
function has(value, permissions) { let isExist = true; if (permissions === undefined||permissions===null || permissions.length === 0) { return true; } for (let i = 0; i < permissions.length; i++) { if (permissions[i] === value) { isExist = false; break; } } return isExist; }
bind是Vue.directive的五個生命周期(鉤子函式)，按照生命周期 bind>inserted>update>componentUpdate>unbind
- bind:只呼叫一次，指令第一次系結到元素時呼叫，在這里可以進行一次性的初始化設定
- inserted:被系結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入檔案中)
- update:所在組件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前，指令的值可能發生了改變，也可能沒有，但是你可以通過比較更新前后的值來忽略不必要的模板更新
- componentUpdate:指令所在組件的 VNode 及其子 VNode 全部更新后呼叫
- unbind:只呼叫一次，指令與元素解綁時呼叫
一般是通過操作權限是通過按鈕的，選單權限是通過前端路由和后臺路由來判斷的，下章會介紹Vue-router配置后臺路由實作選單權限的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/168260.html
標籤：JavaScript