由于按钮权限和用户登录角色相关,因此在用户登录后,我们首先要根据用户角色查询到当前用户权限下所拥有的全部数据。由于按钮分布于不同的页面,所以我们要把查询到的数据存储在 localstorage 或 sessionstorage 中,用于后面进行验证。
具体操作如下 :
一 : 存储角色权限查到的数据
// "bb"查询到的角色数据
sessionStorage.setItem("btnPermissions", "bb")
二 : 自定义全局指令
/**权限指令**/
Vue.directive('has', {
bind: function (el, binding) {
if (!Vue.prototype.$_has(binding.value)) {
// el.parentNode.removeChild(el);
el.style.display = 'none';
}
}
});
//权限检查方法
Vue.prototype.$_has = function (value) {
let isExist = false;
// 获取拥有的权限
let buttonperms = sessionStorage.getItem("btnPermissions")
console.log(buttonperms); //aa
// 权限列表
console.log(value); // aa bb
if (buttonperms == value) {
isExist = true;
}
return isExist;
};
三 : 页面上按钮权限的验证
<button v-has="'aa'">aa1</button>
<button v-has="'bb'">bb1</button>
再具体贴一下代码 , 不知道具体怎么使用可以看这里
在main.js中
在组件中使用