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