由于按钮权限和用户登录角色相关，因此在用户登录后，我们首先要根据用户角色查询到当前用户权限下所拥有的全部数据。由于按钮分布于不同的页面，所以我们要把查询到的数据存储在 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中 在组件中使用
