随着软件的发展,网站从最初的满足用户业务需求到提升用户。就比如一个按钮只要求权限方面的管控我们可以通过 shiro,注解等方式来实现,但是页面上用户点击后没反应或者点击后弹框没权限,这显然不是一个好的用户体验,因此通过前端来实现权限管控也是很有必要的。 思路1.获取按钮权限 PS:事实证明,思路清晰,实现起来就很容易,没几行代码 表结构与数据就表结构方面设计上不管有哪些字段,我们需要一个字段来存储唯一权限,其他都是浮云,如图 打印看看获取到的数据 可以看到我只返回了权限数组,因为其他字段没有意思,当然直接返回对象也是 ok 的 实现先来添加下 vuex 全局变量,方便后面获取到按钮权限后进行存储 /src/store/modules/user新增 button 全局变量,并在新增 mutations 操作 button
为啥是在这,因为按钮的权限是属于每个用户的 /src/store/getters使用时我们一般需要通过这个东西来获取全局变量中的值 /src/store/modules/user回到 user 文件,现在我们可以把取到的 button 权限放到全局变量中就行了 做过权限模块的都知道这个 GetUserInfo 方法,每次缓存失效后,都会调用这个方法去获取必要的用户信息,这里按钮权限我也是在这里直接返回获取。 按钮调用
调用就很简单了,直接获取全局中的权限,用 v-if 判断是否包含这个按钮就行了,includes 后面的字符串就是对应这个按钮的权限 |
|
来自: 润玉书馆 > 《elementUI》