Vue 指令實現(xiàn)按鈕級別權(quán)限管理功能
更新時間：2019年04月23日 14:35:49 作者：xm726
這篇文章主要介紹了Vue 指令實現(xiàn)按鈕級別權(quán)限管理功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
在項目中經(jīng)常有需求要根據(jù)用戶的權(quán)限對界面上的元素進行控制，這里介紹了一直簡單的實現(xiàn)，僅供參考。
當前用戶的權(quán)限列表儲存在 store 里，也可以是其他地方。
指令
// src/directives/permission.js
import Vue from 'vue';
import store from '@/store';
import {get} from '@/utils';
// 是否有權(quán)限
const hasPermission = userPermission => {
let userPermissionList = Array.isArray(userPermission) ? userPermission : [userPermission];
// 當前用戶的權(quán)限列表
let permissionList = get(store, 'getters["user/permission"]', []);
return userPermissionList.some(e => permissionList.includes(e));
};
// 指令
Vue.directive('per', {
bind: (el, binding, vnode) => {
if (!hasPermission(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
// 全局判斷方法
Vue.prototype.$_has = hasPermission;
使用方法
在 mian.js 引入
<div v-per="[admin]">
admin 可見
是否為admin：{{$_has('admin')}} //true
<div>
總結(jié)
以上所述是小編給大家介紹的Vue 指令實現(xiàn)按鈕級別權(quán)限管理功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關(guān)文章
最近火爆全網(wǎng)的羊了個羊小程序，背景是根據(jù)官方介紹，“羊了個羊”是一款闖關(guān)消除小游戲，通關(guān)率不到0.1%。主要玩法為重疊的各類方塊，需要在下方7個欄內(nèi)完成消除，其特點就是“極難”，也因此成為熱門挑戰(zhàn)，對vue3版本網(wǎng)頁小游戲設計思路感興趣的朋友跟隨小編一起看看吧2022-12-12
router-view組件作為vue最核心的路由管理組件，在項目中作為路由管理經(jīng)常被使用到，所以下面小編就來和大家詳細聊聊router-view組件的具體使用方法，希望對大家有所幫助2023-06-06
關(guān)于axios配置請求頭content-type實例詳解
現(xiàn)在前端開發(fā)中需要通過Ajax發(fā)送請求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關(guān)于axios配置請求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04
解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法
今天小編就為大家分享一篇解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
解決Vue路由導航報錯:NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關(guān)于解決Vue路由導航報錯:NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項目時候遇到的一個問題,現(xiàn)將解決辦法分享出來,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了在vue自定義組件中使用?v-model指令詳情，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要為大家詳細介紹了Vue實現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了詳解vue+webpack+express中間件接口使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue實現(xiàn)可拖拽div大小的方法,可封裝為全局方法在項目中所需要地方直接調(diào)用（mixins），本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04
vue項目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法
這篇文章主要給大家介紹了關(guān)于vue項目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法,記錄一下項目需要注意的地方,方便以后快速使用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04