vue前端按鈕權(quán)限控制隱藏
權(quán)限控制描述
如何實(shí)現(xiàn)
1、儲存權(quán)限數(shù)據(jù)
2、權(quán)限判斷方法
3昭齐、設(shè)置vue自定義指令
4、最終代碼與效果
很多后臺管理系統(tǒng)會用到權(quán)限管理矾柜，菜單權(quán)限比較好控制阱驾，按鈕權(quán)限就復(fù)雜一些，本文介紹的就是按鈕權(quán)限如何控制怪蔑，用的是vue項(xiàng)目里覆。
權(quán)限控制描述
前端需要根據(jù)后端傳來的權(quán)限數(shù)據(jù)控制是否顯示新增、編輯缆瓣、刪除（紅框所示部分）功能喧枷。
菜單管理處設(shè)置的新增、刪除弓坞、編輯權(quán)限參數(shù)如圖紅框所示部分
如何實(shí)現(xiàn)
1隧甚、儲存權(quán)限數(shù)據(jù)
首先將權(quán)限控制的數(shù)據(jù)儲存到vuex或者sessionstorage中，或者全局變量昼丑。
如何獲得權(quán)限數(shù)據(jù)并提交到vuex的博文
https://blog.csdn.net/weixin_44849078/article/details/89184039
2呻逆、權(quán)限判斷方法
以新增按鈕為例,因?yàn)樵O(shè)置的新增菜單權(quán)限參數(shù)為"line-add"，所以html標(biāo)簽如下菩帝，v-has為vue自定義指令咖城，line-add為儲存在后臺的權(quán)限參數(shù)
<el-button type="primary" v-has="'line_add'">新增</el-button>
store.getters.getMenuBtnList為儲存在vuex中的菜單按鈕數(shù)據(jù)，遍歷對比permission字段是否與標(biāo)簽中的自定義參數(shù)line_add相等呼奢，匹配成功則表明有權(quán)限宜雀，失敗沒有權(quán)限，返回false握础。
function permissionJudge(value) {
let list = store.getters.getMenuBtnList;
for (let item of list) {
if (item.permission === value) {
return true;
}
}
return false;
}
3辐董、設(shè)置vue自定義指令
注冊一個全局自定義指令并監(jiān)控它
// 注冊一個全局自定義指令 `v-has`
Vue.directive('has', {
// 當(dāng)被綁定的元素插入到 DOM 中時觸發(fā)bind鉤子
bind: function (el, binding) {
if (!permissionJudge(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
結(jié)果發(fā)現(xiàn)報錯了，調(diào)試后發(fā)現(xiàn)el.parentNode為null禀综，所以removeChild方法報錯简烘，我猜可能是因?yàn)閎ind鉤子觸發(fā)時父元素還沒有生成苔严，所以換成inserted鉤子。
inserted：被綁定元素插入父節(jié)點(diǎn)時調(diào)用 (僅保證父節(jié)點(diǎn)存在孤澎，但不一定已被插入文檔中)届氢。
4、最終代碼與效果
使用inserted后成功實(shí)現(xiàn)沒有權(quá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>
