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自定