详解VUE前端按钮权限控制

/权限指令/
  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].perms.indexOf(value)>-1){
     isExist=true;
     break;
    }
   }
   return isExist;
  };

<el-button type="primary" class="btns first" @click="querylist" v-has="'sys_user_list'">查询</el-button>
     <el-button class="btns" @click="showAddView" v-has="'sys_user_save'">新增</el-button>
     <el-button class="btns" @click="modifyUserItem" v-has="'sys_user_update'">修改</el-button>
     <el-button class="btns" @click="delItem" v-has="'sys_user_delete'">删除</el-button>