详解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>