在用戶登陸后，根據用戶id讀取用戶的所有權限數據，放入本地的storage進行存儲，之后，定義指令，如果用戶含有此按鈕權限，則在頁面顯示出來：

/**權限指令**/  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>

以上所述是小編給大家介紹的VUE前端按鈕權限控制詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！