vue element admin 权限控制,vue-element-admin 权限

　　开发离不开权限，不同的用户可以根据不同的权限访问不同的管理目录。主要介绍了vue-element-admin的按钮级权限控制的实现，有一定的参考价值，有兴趣的可以看看。

目录

　　 Idea表结构和数据实现按钮调用随着软件的发展，网站从最初满足用户的业务需求，转变为推广用户。比如一个按钮只需要权限控制，可以通过shiro、annotation等实现。而页面上的用户点击后没有反应或者弹出一个没有权限的框，显然不是一个好的用户体验，所以也需要通过前端实现权限控制。

思路

　　1.获取按钮权限。

　　2.按钮权限保存在前端全局vuex中

　　3.页面加载按钮时，通过判断权限是否存在来控制按钮的显示隐藏或样式选择。

　　PS:事实证明，思路清晰，易于实现，代码行很少。

表结构与数据

　　无论表结构设计中有哪些字段，我们都需要一个字段来存储唯一权限，其他的都只是浮云，如图。

　　看打印出来的数据。

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

实现

　　先添加vuex全局变量，这样以后获得按钮权限后就可以存储了。

　　/src/商店/模块/用户

　　添加一个按钮全局变量，并在新的突变中操作按钮。

　　为什么会在这里？因为按钮的权限是属于每个用户的。

　　/src/store/getters

　　在使用的时候，我们通常需要这个东西来获取全局变量中的值。

　　据我所知，这个state.user.button就是上图中用户对象下的按钮。

　　/src/商店/模块/用户

　　回到用户文件，现在我们可以把获得的按钮权限放在全局变量中。

　　做过权限模块的人都知道这个GetUserInfo方法，每次缓存失败都会调用这个方法获取必要的用户信息。在这里，我也直接返回这里的按钮权限来获取它。

　　如果你的按钮权限是单独写的，也可以在这个文件中写一个获取方法，然后在权限文件中调用，如图。

　　当然，我不建议单独获取，因为由于vue本身的特性，vuex中的数据会在页面刷新后进行初始化，也就是当数据没有了，就会调用后台来获取数据。如果每次都单独获取，这种频繁的重复数据请求，在高并发等情况下，会给数据库带来很大的压力。所以，像一些用户权限数据，我建议登录时统一获取，保存在redis中，以后所有请求都只需要。

按钮调用

　　调用很简单，直接获取全局中的权限即可，用v-if确定是否包含这个按钮。includes后面的字符串是该按钮对应的权限。

　　PS:如果不存储这个简单的字符串数组，也可以改成某个函数来判断。

　　关于vue-element-admin按钮级权限控制的实现，本文到此结束。有关vue-element-admin按钮权限的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。