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

目录
  • 思路
  • 表结构与数据
  • 实现
  • 按钮调用

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

思路

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

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

表结构与数据

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

打印看看获取到的数据

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

实现

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

/src/store/modules/user

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

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

/src/store/getters

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

/src/store/modules/user

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

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

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

按钮调用

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

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

赞 (0)

相关推荐

  • vue-element-admin 登陆及目录权限控制的实现

    vue-element-admin 登陆及目录权限控制的实现

    目录 登陆 目录权限 登陆 万事开头难,做什么事都要有个起点,后面才能更好的进行下去,因此我选择的起点就是最为直观的登陆页面 /login/index.vue /src/views/login/index 去除那些无关的东西,比如什么 rules 校验啊,默认的账号密码之类的东西,直接看核心登陆方法 handleLogin handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = tr

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

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

    目录 思路 表结构与数据 实现 按钮调用 随着软件的发展,网站从最初的满足用户业务需求到提升用户.就比如一个按钮只要求权限方面的管控我们可以通过 shiro,注解等方式来实现,但是页面上用户点击后没反应或者点击后弹框没权限,这显然不是一个好的用户体验,因此通过前端来实现权限管控也是很有必要的. 思路 1.获取按钮权限2.按钮权限保存在前端全局中 vuex3.页面加载按钮时通过判断权限的存在与否,控制按钮的显示隐藏或者样式选择 PS:事实证明,思路清晰,实现起来就很容易,没几行代码 表结构与数据

  • 基于Vue自定义指令实现按钮级权限控制思路详解

    思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮

  • Vue实现按钮级权限方案

    演示 在年初开发一个中后台管理系统,功能涉及到了各个部门(产品.客服.市场等等),在开始的版本中,我和后端配合使用了花裤衩手摸手系列的权限方案,前期非常nice,但是慢慢的随着功能增多.业务越来越复杂,就变得有些吃力了,因为我们的权限动态性太大了 手摸手系列权限方案是有比较清晰的权限划分的,而我们公司部门的岗位职责有时比较模糊. 后端采用RBAC权限方案,为了达到第1点要求,将角色划分的很细,并且角色有时频繁变动,导致每一次前端都需要手动维护 为了解决上面2个痛点,我将原方案进行了一丢丢改造.

  • vue element 生成无线级左侧菜单的实现代码

    首先来总结element ui 官方文档的左侧菜单结构,带有el-submenu为子级节点,el-menu-item表示没有下级.当然,菜单不能写死,因为菜单也许不止两级,所以我们需要递归来实现.根据当前节点是否有下级去判断,如果有下级,则继续调用子级,直到没有下级为止,下面我贴上左侧菜单所有的代码: 请求数据格式 [ { name: "首页", id: -1, icon: "el-icon-picture-outline-round", url: "/i

  • Vue 指令实现按钮级别权限管理功能

    在项目中经常有需求要根据用户的权限对界面上的元素进行控制,这里介绍了一直简单的实现,仅供参考. 当前用户的权限列表储存在 store 里,也可以是其他地方. 指令 // src/directives/permission.js import Vue from 'vue'; import store from '@/store'; import {get} from '@/utils'; // 是否有权限 const hasPermission = userPermission => { let

  • vue实现前端按钮组件权限管理

    目录 方案1:数组+自定义指令 关于路由权限 方案2: 二进制 表达权限: 权限判断 判断和使用 小结 方案1:数组+自定义指令 把权限放到数组中,通过vue的自定义指令来判断是否拥有该权限,有则显示,反之则不显示 我们可以把这个按钮需要的权限放到组件上 <el-button v-hasPermi="['home:advertising:update']" >新建</el-button> 自定义指令: 逻辑就是我们在登陆后会获取该用户的权限,并存储到localS

  • Vue Element前端应用开发之功能点管理及权限控制

    Vue Element前端应用开发之功能点管理及权限控制

    目录 概述 1.权限功能点管理 2.VUE+Element 前端权限控制 概述 本篇随笔介绍功能点管理及权限控制,功能点是作为一个业务对象数据进行管理,在角色范畴上进行分配,而在界面元素控制上,VUE+Element 前端引入Vue自定义指令Directives进行控制. 1.权限功能点管理 我们在前面分析过一个权限系统的表和关系的说明,如下所示. 权限功能点的管理就是对TB_Function的表的管理操作,这个表是我们定义用于系统控制的功能点. 权限功能点的管理为了展示它的树状结果,包括树列表

  • Vue + Element UI 实现权限管理系统之菜单功能实现代码

    Vue + Element UI 实现权限管理系统之菜单功能实现代码

    目录 菜单功能实现 菜单接口封装 菜单管理界面 测试效果 源码下载 菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加findMenuTree 接口. import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', m

  • Vue element实现权限管理业务流程详解

    Vue element实现权限管理业务流程详解

    目录 展开渲染标签编辑权限 对话框内树形组件编辑权限 展示所有权限 添加 编辑 删除 角色 都与上一篇 用户类似 只是接口不同 我们只关注其他不一样的: 展开渲染标签编辑权限 el-table-column type="expand"设置了expand则显示为一个可展开的按钮 显示图上的效果 使用了 三重for循环 按照 tree 数据结构 .children 取得下一级数据 <el-table-column type="expand"> <tem

  • vue Element左侧无限级菜单实现

    最近项目中,要用到element-ui的无限级分类菜单,根据角色生成不同的递归数据,查阅了网上很多资料,发现很多都不太完整并且没有很多的延伸性. 梳理递归数据 我们一般拿到后台的数据是:1.扁平化数据格式2.递归式数据格式 let arr = [ { name:小七, id:1 }, { name:小八, id:2 }, { name: 小九, id:3 } ] 我们从后台拿到的是这种扁平化处理数据,那我们实现递归菜单的话需要什么数据格式呢,需要格式如下: let menuItems = [ {

随机推荐