最近做的一个后台管理系统,要求权限控制到按钮级别,也就会使说不同的用户,可操作的按钮是不同的,有些按钮对某些客户是不可见的,用户A能看到"新增"按钮,而用户B看不到,假设"新增"按钮"的权限是"v-bens:0"
一、获取后台返回的数据,在用户登录成功后,获取用户的按钮权限(数组格式),存储到store中
二、在使用的页面引用store,否则在自定义指令中获取不到vuex(状态管理工具)里面的数据
三、给按钮设置权限标识符
四、根据后台返回的数据存储到状态管理工具中的数据,在自定义指令中进行判断
directives: {
btns: {
mounted(el, bindings) {
if (store.state.user.status === bindings.value) {
el.remove();
}
},
},
},
五、自定义指令参加详解
- el是获取到的dom元素
- bindings是获取里面的属性,列如:value值
- vnode是虚拟节点