vue 按钮 权限控制介绍
时间：2023-02-23 09:10:12|栏目：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中得到当前按钮是否有权限，没有则直接删除掉当前按钮节点。
