基于Vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制思路詳解
思路:
- 登錄:當(dāng)用戶填寫完賬號(hào)和密碼后向服務(wù)端驗(yàn)證是否正確,驗(yàn)證通過之后,服務(wù)端會(huì)返回一個(gè)token,拿到token之后(我會(huì)將這個(gè)token存貯到sessionStorage中,保證刷新頁(yè)面后能記住用戶登錄狀態(tài)),前端會(huì)根據(jù)token再去拉取一個(gè) user_info 的接口來(lái)獲取用戶的詳細(xì)信息(如用戶權(quán)限,用戶名等等信息)。
- 權(quán)限驗(yàn)證:通過token獲取用戶對(duì)應(yīng)的 role,自定義指令,獲取路由meta屬性里btnPermissions( 注: meta.btnPermissions是存放按鈕權(quán)限的數(shù)組,在路由表里配置 ),然后判斷role是否在btnPermissions數(shù)組里,若不在即刪除該按鈕DOM。
按鈕權(quán)限也可以用v-if判斷,但是如果頁(yè)面過多,每個(gè)頁(yè)面頁(yè)面都要獲取用戶權(quán)限r(nóng)ole和路由表里的meta.btnPermissions,然后再做判斷,感覺有點(diǎn)麻煩,而自定義指令,只需在權(quán)限按鈕加入該指令即可。
廢話不多說,上代碼...
路由配置:
path: '/permission',
component: Layout,
name: '權(quán)限測(cè)試',
meta: { btnPermissions: ['admin','supper','normal'] }, //頁(yè)面需要的權(quán)限
children: [
{
path: 'supper',
component: _import('system/supper'),
name: '權(quán)限測(cè)試頁(yè)',
meta: { btnPermissions: ['admin','supper'] } //頁(yè)面需要的權(quán)限
},
{
path: 'normal',
component: _import('system/normal'),
name: '權(quán)限測(cè)試頁(yè)',
meta: { btnPermissions: ['admin'] } //頁(yè)面需要的權(quán)限
}
]
自定義指令:
import Vue from 'vue'
/**權(quán)限指令**/
const has = Vue.directive('has', {
bind: function (el, binding, vnode) {
// 獲取按鈕權(quán)限
let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
if (!Vue.prototype.$_has(btnPermissions)) {
el.parentNode.removeChild(el);
}
}
});
// 權(quán)限檢查方法
Vue.prototype.$_has = function (value) {
let isExist = false;
let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
return false;
}
if (value.indexOf(btnPermissionsStr) > -1) {
isExist = true;
}
return isExist;
};
export {has}
然后在main.js文件引入文件
import has from './public/js/btnPermissions.js';
頁(yè)面中按鈕只需加v-has即可
<el-button @click='editClick' type="primary" v-has>編輯</el-button>
結(jié)語(yǔ):
權(quán)限這種事需要前后端結(jié)合,前端盡可能的去控制,記?。河肋h(yuǎn)不相信用戶輸入!
以上所述是小編給大家介紹的基于Vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vscode中使用vue的一些插件總結(jié)(方便開發(fā))
對(duì)于很多使用vscode編寫vue項(xiàng)目的新手同學(xué)來(lái)說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
element vue Array數(shù)組和Map對(duì)象的添加與刪除操作
這篇文章主要介紹了element vue Array數(shù)組和Map對(duì)象的添加與刪除功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Vue+Java 通過websocket實(shí)現(xiàn)服務(wù)器與客戶端雙向通信操作
這篇文章主要介紹了Vue+Java 通過websocket實(shí)現(xiàn)服務(wù)器與客戶端雙向通信操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09
詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot
本篇文章給大家通過代碼實(shí)例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識(shí),有這方面興趣的朋友參考下吧。2018-01-01
Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁(yè)面跳轉(zhuǎn)功能(最新推薦)
我們?cè)赑roflie.vue實(shí)例中,有beforeRouteEnter、beforeRouteLeave兩個(gè)函數(shù)分別是進(jìn)入路由之前和離開路由之后,我們可以在這兩個(gè)函數(shù)之內(nèi)進(jìn)行數(shù)據(jù)的請(qǐng)求,下面給大家分享Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁(yè)面跳轉(zhuǎn)功能,感興趣的朋友一起看看吧2024-05-05
Vue3+Vite 環(huán)境變量和模式配置詳解(推薦)
在Vue 3中,你可以通過 import.meta.env 訪問環(huán)境變量,這些變量可以在你的應(yīng)用代碼中使用,但它們通常用于配置不應(yīng)該硬編碼在代碼中的值,這篇文章主要介紹了Vue3+Vite 環(huán)境變量和模式配置詳解,需要的朋友可以參考下2024-12-12

