Vue项目中根据用户权限 控制按钮 之 自定义指令

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44781409/article/details/96437936

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

在组件中使用