快捷導(dǎo)航

Vue 指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限管理功能

更新時(shí)間：2019年04月23日 14:35:49 作者：xm726

這篇文章主要介紹了Vue 指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限管理功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在項(xiàng)目中經(jīng)常有需求要根據(jù)用戶的權(quán)限對(duì)界面上的元素進(jìn)行控制，這里介紹了一直簡(jiǎn)單的實(shí)現(xiàn)，僅供參考。

當(dāng)前用戶的權(quán)限列表儲(chǔ)存在 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];
  // 當(dāng)前用戶的權(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 可見(jiàn)
  是否為admin：{{$_has('admin')}}  //true
<div>

總結(jié)

以上所述是小編給大家介紹的Vue 指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限管理功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

vue3版本網(wǎng)頁(yè)小游戲設(shè)計(jì)思路
最近火爆全網(wǎng)的羊了個(gè)羊小程序，背景是根據(jù)官方介紹，“羊了個(gè)羊”是一款闖關(guān)消除小游戲，通關(guān)率不到0.1%。主要玩法為重疊的各類方塊，需要在下方7個(gè)欄內(nèi)完成消除，其特點(diǎn)就是“極難”，也因此成為熱門挑戰(zhàn)，對(duì)vue3版本網(wǎng)頁(yè)小游戲設(shè)計(jì)思路感興趣的朋友跟隨小編一起看看吧
2022-12-12
詳解Vue中router-view組件的使用
router-view組件作為vue最核心的路由管理組件，在項(xiàng)目中作為路由管理經(jīng)常被使用到，所以下面小編就來(lái)和大家詳細(xì)聊聊router-view組件的具體使用方法，希望對(duì)大家有所幫助
2023-06-06
關(guān)于axios配置請(qǐng)求頭content-type實(shí)例詳解
現(xiàn)在前端開(kāi)發(fā)中需要通過(guò)Ajax發(fā)送請(qǐng)求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關(guān)于axios配置請(qǐng)求頭content-type的相關(guān)資料,需要的朋友可以參考下
2022-04-04
解決Vue axios post請(qǐng)求,后臺(tái)獲取不到數(shù)據(jù)的問(wèn)題方法
今天小編就為大家分享一篇解決Vue axios post請(qǐng)求,后臺(tái)獲取不到數(shù)據(jù)的問(wèn)題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關(guān)于解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項(xiàng)目時(shí)候遇到的一個(gè)問(wèn)題,現(xiàn)將解決辦法分享出來(lái),需要的朋友可以參考下
2023-01-01
在vue自定義組件中使用?v-model指令詳情
這篇文章主要介紹了在vue自定義組件中使用?v-model指令詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-06-06
Vue實(shí)現(xiàn)穿梭框效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
詳解vue+webpack+express中間件接口使用
這篇文章主要介紹了詳解vue+webpack+express中間件接口使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
vue實(shí)現(xiàn)可拖拽div大小的方法
這篇文章主要介紹了vue實(shí)現(xiàn)可拖拽div大小的方法,可封裝為全局方法在項(xiàng)目中所需要地方直接調(diào)用（mixins），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-04-04
vue項(xiàng)目打包發(fā)布到Nginx后無(wú)法訪問(wèn)后端接口的解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包發(fā)布到Nginx后無(wú)法訪問(wèn)后端接口的解決辦法,記錄一下項(xiàng)目需要注意的地方,方便以后快速使用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-04-04