vue前端按钮权限控制隐藏
权限控制描述
如何实现
1、储存权限数据
2、权限判断方法
3、设置vue自定义指令
4、最终代码与效果
很多后台管理系统会用到权限管理，菜单权限比较好控制，按钮权限就复杂一些，本文介绍的就是按钮权限如何控制，用的是vue项目。
权限控制描述
前端需要根据后端传来的权限数据控制是否显示新增、编辑、删除(红框所示部分)功能。
image.png
在这里插入图片描述
菜单管理处设置的新增、删除、编辑权限参数如图红框所示部分
image.png
如何实现
1、储存权限数据
首先将权限控制的数据储存到vuex或者sessionstorage中，或者全局变量。
如何获得权限数据并提交到vuex的博文
https://blog.csdn.net/weixin_44849078/article/details/89184039
2、权限判断方法
以新增按钮为例,因为设置的新增菜单权限参数为"line-add"，所以html标签如下，v-has为vue自定义指令，line-add为储存在后台的权限参数
新增
store.getters.getMenuBtnList为储存在vuex中的菜单按钮数据，遍历对比permission字段是否与标签中的自定义参数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自定义指令
注册一个全局自定义指令并监控它
// 注册一个全局自定义指令 `v-has`
Vue.directive('has', {
// 当被绑定的元素插入到 DOM 中时触发bind钩子
bind: function (el, binding) {
if (permissionJudge(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
结果发现报错了，调试后发现el.parentNode为null，所以removeChild方法报错，我猜可能是因为bind钩子触发时父元素还没有生成，所以换成inserted钩子。
inseted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
4、最终代码与效果
使用inserted后成功实现没有权限的按钮隐藏效果，代码如下
Vue.directive('has', {
inserted: function (el, binding) {
if (!permissionJudge(binding.value)) {
el.parentNode.removeChild(el);
}
function permissionJudge(value) {
// 此处store.getters.getMenuBtnList代表vuex中储存的按钮菜单数据
let list = store.getters.getMenuBtnList;
for (let item of list) {
if (item.permission === value) {
return true;
}
}
return false;
}
}
});
新增
image.png