這篇文章主要介紹了Vue 指令實現按鈕級別權限管理功能,非常不錯,具有一定的參考借鑑價值,需要的朋友可以參考下
在項目中經常有需求要根據用戶的權限對界面上的元素進行控制,這裏介紹了一直簡單的實現,僅供參考。
當前用戶的權限列表儲存在 store 裏,也可以是其他地方。
指令
// src/directives/permission.js import Vue from 'vue'; import store from '@/store'; import {get} from '@/utils'; // 是否有權限 const hasPermission = userPermission => { let userPermissionList = Array.isArray(userPermission) ? userPermission : [userPermission]; // 當前用戶的權限列表 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>
總結
以上所述是小編給大家介紹的Vue 指令實現按鈕級別權限管理功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回覆大家的!