耀极客论坛

 找回密码
 立即注册
查看: 589|回复: 0

vue 按钮 权限控制介绍

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-8 02:34:14 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了vue 按钮 权限控制,在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限,必须当有删除权限时,就显示删除按钮,下面我们就来了解一下具体的解决方法,需要的朋友也可以参考一下
  前言:

  在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限。必须当有删除权限时,就显示删除按钮。没有这个权限时,就不显示或者删除这个按钮。通过查找资料,通过vuex来实现这个功能。

一、步骤


1.定义buttom权限

  在state中创建buttomPermission,用于保存后台接口返回的权限数据。
  setPermission用于接受数据,将页面权限管理传入到buttomPermission对象中。
  使用vuex:
  1. Vue.use(Vuex)
  2. 创建vue实例
  3. const store = new Vuex.Store({
  4.     state: {
  5.         buttomPermission: {}
  6.     },
  7.     mutations: {
  8.         setPermission(state, permission) {
  9.             state.buttomPermission = permission
  10.         }
  11.     }
  12. })
  13. export default store
复制代码
2.定义store
  1. import store from './store/index.js'
  2. new Vue({
  3.     store,
  4.     el: '#app',
  5.     render: h => h(App)
  6. })
复制代码
3.创建permission指令

  新建directives文件夹,创建permission.js文件。
  这里使用inserted函数,在被绑定元素插入父节点时检测该元素是否有权限。
  1. inserted( el, bindings, vnode ) { }
复制代码
4.使用permission指令

  在按钮页面引入和定义 permission指令,并且在buttom中写入指令,绑定指令中相对于的值。
  1. ‹button v-permission="'add'">添加‹/button>
  2. import permission from './directives/permission'
  3. directives: {permission,},
复制代码
5.删除无权限数据

  在permission指令,通过bindings获取该按钮绑定的value值,然后在buttomPermission对象中找到,然后判断是否有权限,如果没有权限,则删除该节点。
  1. inserted(el, bindings, vnode) {
  2.         let btnPermissionValue = bindings.value;
  3.         let boolean =vnode.context.$store.state.buttomPermission[btnPermissionValue];
  4.         !boolean && el.parentNode.removeChild(el);
  5.     }
复制代码
6.传入状态管理数据

  将状态管理数据,通过setPermission方法传入到权限管理中
  1. let permissions = {}
  2. this.$store.commit("setPermission", permissions);
复制代码
二、概况

  总的来说,就是通过vuex定义一个buttomPermission权限状态对象,然后再创建一个permissions指令,通过对每个buttom按钮使用permissions指令,并且绑定该按钮特定意义的值。然后在permission.js文件中,获取当前value值,从buttomPermission中得到当前按钮是否有权限,没有则直接删除掉当前按钮节点。
  到此这篇关于vue 按钮 权限控制介绍的文章就介绍到这了,更多相关vue 按钮 权限控制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:34 , Processed in 0.066807 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表