在用戶(hù)登陸后,根據(jù)用戶(hù)id讀取用戶(hù)的所有權(quán)限數(shù)據(jù),放入本地的storage進(jìn)行存儲(chǔ),之后,定義指令,如果用戶(hù)含有此按鈕權(quán)限,則在頁(yè)面顯示出來(lái):
/**權(quán)限指令**/  Vue.directive('has', {   bind: function(el, binding) {    if (!Vue.prototype.$_has(binding.value)) {     el.parentNode.removeChild(el);    }   }  });  //權(quán)限檢查方法  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;  };頁(yè)面上使用方式:
<el-button type="primary" class="btns first" @click="querylist" v-has="'sys_user_list'">查詢(xún)</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前端按鈕權(quán)限控制詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注