vue 按钮 权限控制介绍
前言：
在日常项目中，会碰到需要根据后台接口返回的数据，来判断当前用户的操作权限。必须当有删除权限时，就显示删除按钮。没有这个权限时，就不显示或者删除这个按钮。通过查找资料，通过vuex来实现这个功能。
一、步骤
1.定义buttom权限
在state中创建buttomPermission，用于保存后台接口返回的权限数据。
setPermission用于接受数据，将页面权限管理传入到buttomPermission对象中。
使用vuex：
Vue.use(Vuex)
创建vue实例
const store = new Vuex.Store({
state: {
buttomPermission: {}
},
mutations: {
setPermission(state, permission) {
state.buttomPermission = permission
}
}
})
export default store
2.定义store
import store from './store/index.js'
new Vue({
store,
el: '#app',
render: h => h(App)
})
3.创建permission指令
新建directives文件夹，创建permission.js文件。
这里使用inserted函数，在被绑定元素插入父节点时检测该元素是否有权限。
inserted( el, bindings, vnode ) { }
4.使用permission指令
在按钮页面引入和定义 permission指令，并且在buttom中写入指令，绑定指令中相对于的值。
<button v-permission="'add'">添加</button>
import permission from './directives/permission'
directives: {permission,},
5.删除无权限数据
在permission指令,通过bindings获取该按钮绑定的value值，然后在buttomPermission对象中找到，然后判断是否有权限，如果没有权限，则删除该节点。
inserted(el, bindings, vnode) {
let btnPermissionValue = bindings.value;
let boolean =vnode.context.$store.state.buttomPermission[btnPermissionValue];
!boolean && el.parentNode.removeChild(el);
}
6.传入状态管理数据
将状态管理数据，通过setPermission方法传入到权限管理中
let permissions = {}
this.$store.commit("setPermission", permissions);
二、概况
总的来说，就是通过vuex定义一个buttomPermission权限状态对象，然后再创建一个permissions指令，通过对每个buttom按钮使用permissions指令，并且绑定该按钮特定意义的值。然后在permission.js文件中，获取当前value值，从buttomPermission中得到当前按钮是否有权限，没有则直接删除掉当前按钮节点。
到此这篇关于vue 按钮 权限控制介绍的文章就介绍到这了,更多相关vue 按钮 权限控制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在实际项目开发中,我们经常会遇到选项卡切换,对于一个前端工程师来说,组件化/模块化开发是一种必备的行为规范,下面这篇文章主要给大家介绍了关于vue使用动态组件实现TAB切换效果的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了Vue组件开发之异步组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了vue-router中params和query的区别，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
今天小编就为大家分享一篇vue在路由中验证token是否存在的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue源码中要const _toStr = Object.prototype.toString的原因分析
这篇文章主要介绍了Vue源码中要const _toStr = Object.prototype.toString的原因分析,在文中给大家提到了Object.prototype.toString方法的原理,需要的朋友可以参考下2018-12-12
解决Vue + Echarts 使用markLine标线(precision精度问题)
这篇文章主要介绍了解决Vue + Echarts 使用markLine标线(precision精度问题)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue-router源码之history类的浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
vue项目中常常会用到keepalive来作缓存,在应付基本要求上能够说很是方便,可是遇到同一个页面,根据条件不一样,分别缓存或者不缓存,就有些麻烦了,这篇文章主要给大家介绍了关于keep-alive如何清除缓存的相关资料,需要的朋友可以参考下2021-08-08
Vue注册组件有这几种，分别是全局注册、局部注册、在模块系统中注册，这篇文章主要介绍了Vue注册组件的方法,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了vue+element UI实现树形表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
最新评论