基于Vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制思路詳解
更新時(shí)間：2018年05月23日 10:46:27 作者：lixinchao
這篇文章主要介紹了基于vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制,本文給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
思路：
- 登錄：當(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)文章
這篇文章主要為大家詳細(xì)介紹了vue2.0 keep-alive的最佳實(shí)踐，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vscode中使用vue的一些插件總結(jié)(方便開發(fā))
對(duì)于很多使用vscode編寫vue項(xiàng)目的新手同學(xué)來(lái)說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue 中如何正確引入第三方模塊的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
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
這篇文章主要介紹了antd vue v-decorator的取值與賦值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot
本篇文章給大家通過代碼實(shí)例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識(shí)，有這方面興趣的朋友參考下吧。2018-01-01
我們正常在開發(fā)項(xiàng)目中,表格的風(fēng)格是一致的,但是表格或多或少會(huì)有些不同,有些是需要分頁(yè),有些是按鈕功能不同,有些又需要加Tag,或者對(duì)時(shí)間進(jìn)行格式化等,這篇文章主要介紹了elementPlus表格二次封裝過程,需要的朋友可以參考下2024-07-07
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