vue 按钮 权限控制
toinghub 人气:0前言:
在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限。必须当有删除权限时,就显示删除按钮。没有这个权限时,就不显示或者删除这个按钮。通过查找资料,通过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
中得到当前按钮是否有权限,没有则直接删除掉当前按钮节点。
加载全部内容