vue 自定义指令验证按钮权限

由于按钮权限和用户登录角色相关，因此在用户登录后，我们首先要根据用户角色查询到当前用户权限下所拥有的全部数据。由于按钮分布于不同的页面，所以我们要把查询到的数据存储在 localstorage 或 sessionstorage 中，用于后面进行验证。

具体操作过程如下：

1.存储角色权限查到的数据

/**存储数据**/
let data = sessionStorage.setItem(‘buttenpremissions‘’,JSON.stringify(res.data));
​

2.自定义全局指令

    /**权限指令**/
    Vue.directive('has', {
      bind: function(el, binding) {
        if (!Vue.prototype.$_has(binding.value)) {
          el.parentNode.removeChild(el);
        }
      }
    });
    //权限检查方法
    Vue.prototype.$_has = function(value) {
      debugger
      let isExist=false;
      let buttonpermsStr=sessionStorage.getItem("buttenpremissions");
      if(buttonpermsStr==undefined || buttonpermsStr==null){
        return false;
      }
      let buttonperms=JSON.parse(buttonpermsStr);
      for(let i=0;i<buttonperms.length;i++){
        if(buttonperms[i].url == value){
          isExist=true;
          break;
        }
      }
      return isExist;
    };

​

3.页面上按钮权限验证方式

<Button v-has='red:add'>增加</Button>
​