這篇文章主要介紹了基於vue自訂指令實現按鈕級權限控制,本文給大家介紹的非常詳細，有興趣的朋友一起學習吧
思路：
登入：當使用者填寫完帳號和密碼後向服務端驗證是否正確，驗證通過之後，服務端會回傳一個token，拿到token之後（我會將這個token存貯到sessionStorage中，保證刷新頁面後能記住使用者登入狀態），前端會根據token再去拉取一個user_info 的介面來取得使用者的詳細資料（如使用者權限，使用者名稱等等資訊).
權限驗證：透過token取得使用者對應的role，自訂指令，取得路由meta屬性裡btnPermissions( 註： meta.btnPermissions是存放按鈕權限的數組，在路由表裡配置)，然後判斷role是否在btnPermissions數組裡，若不在即刪除該按鈕DOM。
按鈕權限也可以用v-if判斷，但是如果頁面過多，每個頁面頁面都要取得使用者權限role和路由表裡的meta .btnPermissions,然後再做判斷，感覺有點麻煩，而自訂指令，只需在權限按鈕加入該指令即可。
廢話不多說，上程式碼...
路由設定：
##
path: '/permission',
component: Layout,
name: '权限测试',
meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限
children: [
{
path: 'supper',
component: _import('system/supper'),
name: '权限测试页',
meta: { btnPermissions: ['admin','supper'] } //页面需要的权限
},
{
path: 'normal',
component: _import('system/normal'),
name: '权限测试页',
meta: { btnPermissions: ['admin'] } //页面需要的权限
}
]自訂指令：
#
import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
bind: function (el, binding, vnode) {
// 获取按钮权限
let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
if (!Vue.prototype.$_has(btnPermissions)) {
el.parentNode.removeChild(el);
}
}
});
// 权限检查方法
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';
#頁面中按鈕只需加v-has即可
#
<el-button @click='editClick' type="primary" v-has>编辑</el-button>
結語：
以上是基於Vue自訂指令實現按鈕級權限控制的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
