vue-element-admin按钮级权限管控的实现

随着软件的发展，网站从最初的满足用户业务需求到提升用户。就比如一个按钮只要求权限方面的管控我们可以通过 shiro，注解等方式来实现，但是页面上用户点击后没反应或者点击后弹框没权限，这显然不是一个好的用户体验，因此通过前端来实现权限管控也是很有必要的。

思路

1.获取按钮权限
2.按钮权限保存在前端全局中 vuex
3.页面加载按钮时通过判断权限的存在与否，控制按钮的显示隐藏或者样式选择

PS：事实证明，思路清晰，实现起来就很容易，没几行代码

表结构与数据

就表结构方面设计上不管有哪些字段，我们需要一个字段来存储唯一权限，其他都是浮云，如图

打印看看获取到的数据

可以看到我只返回了权限数组，因为其他字段没有意思，当然直接返回对象也是 ok 的

实现

先来添加下 vuex 全局变量，方便后面获取到按钮权限后进行存储

/class="lazy" data-src/store/modules/user

新增 button 全局变量，并在新增 mutations 操作 button

为啥是在这，因为按钮的权限是属于每个用户的

/class="lazy" data-src/store/getters

使用时我们一般需要通过这个东西来获取全局变量中的值
这个 state.user.button 以我的理解就是上图中 user 对象下的 button

/class="lazy" data-src/store/modules/user

回到 user 文件，现在我们可以把取到的 button 权限放到全局变量中就行了

做过权限模块的都知道这个 GetUserInfo 方法，每次缓存失效后，都会调用这个方法去获取必要的用户信息，这里按钮权限我也是在这里直接返回获取。
如果说你的按钮权限时单独写的，你也可以在这个文件里写个获取的方法，然后再 permission 文件里去调用，如图

当然我不太建议单独去获取，因为由于vue自身特性的原因，vuex中的数据在页面刷新之后其中的数据会初始化，也就是数据没了，这个时候就会去调用后台去获取数据，如果每次都去单独获取，在高并发等情况下这种频繁的重复数据的请求会给数据库带来巨大的压力，因此像一些用户权限数据，我比较建议在登陆时统一获取后保存到 redis 这种地方，以后的请求都只需要从 redis 取就可以了，效率上也会得到巨大的提升。

按钮调用

调用就很简单了，直接获取全局中的权限，用 v-if 判断是否包含这个按钮就行了，includes 后面的字符串就是对应这个按钮的权限
PS：如果存储起来的不是这种简单的字符串数组，也可以改为 some 函数去判断

到此这篇关于vue-element-admin按钮级权限管控的实现的文章就介绍到这了,更多相关vue-element-admin按钮权限内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！