權限控制描述
如何實現(xiàn)
1、儲存權限數(shù)據(jù)
2测僵、權限判斷方法
3街佑、設置vue自定義指令
4、最終代碼與效果
很多后臺管理系統(tǒng)會用到權限管理捍靠，菜單權限比較好控制沐旨，按鈕權限就復雜一些，本文介紹的就是按鈕權限如何控制榨婆，用的是vue項目希俩。
權限控制描述
前端需要根據(jù)后端傳來的權限數(shù)據(jù)控制是否顯示新增、編輯纲辽、刪除（紅框所示部分）功能颜武。
菜單管理處設置的新增、刪除拖吼、編輯權限參數(shù)如圖紅框所示部分
如何實現(xiàn)
1鳞上、儲存權限數(shù)據(jù)
首先將權限控制的數(shù)據(jù)儲存到vuex或者sessionstorage中，或者全局變量吊档。
如何獲得權限數(shù)據(jù)并提交到vuex的博文
https://blog.csdn.net/weixin_44849078/article/details/89184039
2篙议、權限判斷方法
以新增按鈕為例,因為設置的新增菜單權限參數(shù)為"line-add"，所以html標簽如下怠硼，v-has為vue自定義指令鬼贱，line-add為儲存在后臺的權限參數(shù)
<el-button type="primary" v-has="'line_add'">新增</el-button>
store.getters.getMenuBtnList為儲存在vuex中的菜單按鈕數(shù)據(jù)，遍歷對比permission字段是否與標簽中的自定義參數(shù)line_add相等香璃，匹配成功則表明有權限这难，失敗沒有權限，返回false葡秒。
function permissionJudge(value) {
let list = store.getters.getMenuBtnList;
for (let item of list) {
if (item.permission === value) {
return true;
}
}
return false;
}
3姻乓、設置vue自定義指令
注冊一個全局自定義指令并監(jiān)控它
// 注冊一個全局自定義指令 `v-has`
Vue.directive('has', {
// 當被綁定的元素插入到 DOM 中時觸發(fā)bind鉤子
bind: function (el, binding) {
if (permissionJudge(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
結果發(fā)現(xiàn)報錯了，調試后發(fā)現(xiàn)el.parentNode為null眯牧，所以removeChild方法報錯蹋岩，我猜可能是因為bind鉤子觸發(fā)時父元素還沒有生成，所以換成inserted鉤子学少。
inseted：被綁定元素插入父節(jié)點時調用 (僅保證父節(jié)點存在剪个，但不一定已被插入文檔中)。
4版确、最終代碼與效果
使用inserted后成功實現(xiàn)沒有權限的按鈕隱藏效果扣囊，代碼如下
Vue.directive('has', {
inserted: function (el, binding) {
if (!permissionJudge(binding.value)) {
el.parentNode.removeChild(el);
}
function permissionJudge(value) {
// 此處store.getters.getMenuBtnList代表vuex中儲存的按鈕菜單數(shù)據(jù)
let list = store.getters.getMenuBtnList;
for (let item of list) {
if (item.permission === value) {
return true;
}
}
return false;
}
}
});
<el-button type="primary" v-has="'line_add'">新增</el-button>
