詳解VUE前端按鈕權(quán)限控制

更新時(shí)間：2019年04月26日 11:58:18 作者：水田如雅

這篇文章主要介紹了VUE前端按鈕權(quán)限控制，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在用戶登陸后，根據(jù)用戶id讀取用戶的所有權(quán)限數(shù)據(jù)，放入本地的storage進(jìn)行存儲(chǔ)，之后，定義指令，如果用戶含有此按鈕權(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'">查詢</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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue.js計(jì)算屬性的變化監(jiān)聽的示例詳解
在Vue.js中,計(jì)算屬性（computed properties）是組件的重要組成部分,它們根據(jù)組件的數(shù)據(jù)自動(dòng)計(jì)算新的值,并在數(shù)據(jù)變化時(shí)自動(dòng)更新,本文將深入探討如何在Vue.js中監(jiān)聽計(jì)算屬性的變化,幫助你更好地理解Vue.js的響應(yīng)式系統(tǒng),需要的朋友可以參考下
2025-03-03
vue跳轉(zhuǎn)時(shí)根據(jù)url錨點(diǎn)(#xxx)實(shí)現(xiàn)頁(yè)面內(nèi)容定位的方法
本前端仔在做頁(yè)面跳轉(zhuǎn)的時(shí)候,被要求跳轉(zhuǎn)到頁(yè)面時(shí)候,把對(duì)應(yīng)部分的內(nèi)容自動(dòng)滾動(dòng)到頂部,我一開始想到的就是根據(jù)錨點(diǎn)<a href="#xxid">進(jìn)行處理,但是發(fā)現(xiàn)不太好實(shí)現(xiàn),于是便自己研究了一個(gè)比較取巧的方法,需要的朋友可以參考下
2024-04-04
Vue項(xiàng)目如何部署到Tomcat服務(wù)器上
這篇文章主要介紹了Vue項(xiàng)目如何部署到Tomcat服務(wù)器上,Vue中自帶webpack,可以通過一行命令將項(xiàng)目打包,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-03-03
vue 簡(jiǎn)單自動(dòng)補(bǔ)全的輸入框的示例
這篇文章主要介紹了vue 簡(jiǎn)單自動(dòng)補(bǔ)全的輸入框的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-03-03
淺談vue+webpack項(xiàng)目調(diào)試方法步驟
本篇文章主要介紹了淺談vue+webpack項(xiàng)目調(diào)試方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-09-09
vue2中使用SSE(服務(wù)器發(fā)送事件)原因分析
SSE是圍繞只讀Comet交互推出的API或者模式,SSE 支持短輪詢、長(zhǎng)輪詢和HTTP 流,而且能在斷開連接時(shí)自動(dòng)確定何時(shí)重新連接,本文重點(diǎn)給大家介紹
2023-10-10
vue3+ts+MicroApp實(shí)戰(zhàn)教程
這篇文章主要介紹了vue3+ts+MicroApp實(shí)戰(zhàn)教程,分別在主應(yīng)用項(xiàng)目(main)和子應(yīng)用(childrenOne,childrenTwo)項(xiàng)目中安裝microApp，本文給大家詳細(xì)講解，需要的朋友可以參考下
2022-10-10
理解Vue2.x和Vue3.x自定義指令用法及鉤子函數(shù)原理
這篇文章主要介紹了理解Vue2.x和Vue3.x的自定義指令的用法及鉤子函數(shù)原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2021-09-09
第一次在Vue中完整使用AJAX請(qǐng)求和axios.js的實(shí)戰(zhàn)記錄
AJAX是現(xiàn)代Web開發(fā)的一個(gè)關(guān)鍵部分,盡管它一開始看起來(lái)令人生畏,但在你的武庫(kù)中擁有它是必須的,下面這篇文章主要給大家介紹了關(guān)于第一次在Vue中完整使用AJAX請(qǐng)求和axios.js的相關(guān)資料,需要的朋友可以參考下
2022-11-11
vue使用腳手架vue-cli創(chuàng)建并引入自定義組件
這篇文章介紹了vue使用腳手架vue-cli創(chuàng)建并引入自定義組件的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03