权限按钮的应用

通过自定义指令实现按钮权限的控制

//全局注册按钮权限自定义指令
vue.directive('hasRole'，{
   bind:(el,binding)=>{},
   inserted:function(el,binding){
   		//假设拥有'admin','user' 这两种角色的用户按钮显示 其他不显示
		let roles=store.state.userInfo.roles;//从vuex中获取用户角色 roles=['admin','user'] 这个地方也可以从其他地方或者通过其他方式获取 案例展示
		if(!roles.includes(binding.value)){ //如果在roles数组中 没有找到 则从父元素节点上面 移除该元素
			el.parentNode.removeChild(el)
		}
	},
})
1
2
3
4
5
6
7
8
9
10
11

在组件中使用

<button v-hasRole="'admin'">编辑</button>
<button v-hasRole="'admin'">删除</button>
<button >查看</button>
1
2
3