vue前端按钮显示隐藏_2019-10-25 vue前端按钮权限控制隐藏

vue前端按钮权限控制隐藏

权限控制描述

如何实现

1、储存权限数据

2、权限判断方法

3、设置vue自定义指令

4、最终代码与效果

很多后台管理系统会用到权限管理，菜单权限比较好控制，按钮权限就复杂一些，本文介绍的就是按钮权限如何控制，用的是vue项目。

权限控制描述

前端需要根据后端传来的权限数据控制是否显示新增、编辑、删除(红框所示部分)功能。

image.png

在这里插入图片描述

菜单管理处设置的新增、删除、编辑权限参数如图红框所示部分

image.png

如何实现

1、储存权限数据

首先将权限控制的数据储存到vuex或者sessionstorage中，或者全局变量。

如何获得权限数据并提交到vuex的博文

https://blog.youkuaiyun.com/weixin_44849078/article/details/89184039

2、权限判断方法

以新增按钮为例,因为设置的新增菜单权限参数为"line-add"，所以html标签如下，v-has为vue自定