v-1.0.8 permission指令注释
This commit is contained in:
WindowBird
parent
7cca406478
commit
03243d62e4
|
|
@ -1,6 +1,18 @@
|
|||
/**
|
||||
* @file permission.js
|
||||
* @description Vue权限指令实现，用于根据用户权限控制DOM元素显示/隐藏
|
||||
* 支持Vue 2和Vue 3，提供v-permission指令进行灵活的权限控制
|
||||
*/
|
||||
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { ADMIN_ROLES, normalizePermissions } from '@/utils/permission'
|
||||
|
||||
/**
|
||||
* 解析所需权限列表
|
||||
* 将指令值解析为标准权限数组
|
||||
* @param {Array|string|null} value - 指令绑定的值
|
||||
* @returns {Array} 解析后的权限数组
|
||||
*/
|
||||
const resolveRequiredPermissions = (value) => {
|
||||
if (!value) return []
|
||||
if (Array.isArray(value)) return value.filter(Boolean)
|
||||
|
|
@ -13,28 +25,61 @@ const resolveRequiredPermissions = (value) => {
|
|||
return []
|
||||
}
|
||||
|
||||
/**
|
||||
* 评估用户权限
|
||||
* 检查用户是否拥有所需的权限
|
||||
* @param {Object|null} userStore - 用户状态存储
|
||||
* @param {Array|string} requiredPermissions - 需要验证的权限
|
||||
* @param {Object} modifiers - 指令修饰符，用于控制权限验证策略
|
||||
* @returns {boolean} 用户是否拥有所需权限
|
||||
*/
|
||||
const evaluatePermission = (userStore, requiredPermissions, modifiers = {}) => {
|
||||
// 用户存储不可用时，默认为无权限
|
||||
if (!userStore) return false
|
||||
|
||||
// 解析权限验证策略：支持requireAll和all两种修饰符
|
||||
const {requireAll = modifiers.all} = modifiers
|
||||
|
||||
// 解析所需权限
|
||||
const permissionsToCheck = resolveRequiredPermissions(requiredPermissions)
|
||||
|
||||
// 空权限列表表示不需要权限，直接返回true
|
||||
if (permissionsToCheck.length === 0) return true
|
||||
|
||||
// 获取用户信息
|
||||
const userInfo = userStore.userInfo
|
||||
const userRoles = userInfo?.roles || []
|
||||
|
||||
// 检查用户是否为管理员，管理员拥有所有权限
|
||||
const isAdmin = Array.isArray(userRoles) && userRoles.some((role) => ADMIN_ROLES.includes(role))
|
||||
if (isAdmin) return true
|
||||
|
||||
// 获取并规范化用户权限
|
||||
const userPermissions = normalizePermissions(userInfo?.permissions)
|
||||
|
||||
// 用户无权限时返回false
|
||||
if (userPermissions.length === 0) return false
|
||||
|
||||
// 根据验证策略进行权限检查
|
||||
if (requireAll) {
|
||||
// all修饰符：用户必须拥有所有指定权限
|
||||
return permissionsToCheck.every((permission) => userPermissions.includes(permission))
|
||||
}
|
||||
|
||||
// 默认策略：用户只需拥有任一指定权限即可
|
||||
return permissionsToCheck.some((permission) => userPermissions.includes(permission))
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户状态存储
|
||||
* 通过多种途径尝试获取Pinia实例和用户存储
|
||||
* @param {Object} binding - 指令绑定对象
|
||||
* @param {Object} vnode - 虚拟节点对象
|
||||
* @returns {Object|null} 用户状态存储或null
|
||||
*/
|
||||
const getUserStore = (binding, vnode) => {
|
||||
// 尝试从多个可能的路径获取Pinia实例
|
||||
// 这是为了兼容不同的使用场景和组件层次结构
|
||||
const piniaInstance =
|
||||
binding?.instance?.proxy?.$pinia ||
|
||||
binding?.instance?.appContext?.app?.$pinia ||
|
||||
|
|
@ -42,9 +87,11 @@ const getUserStore = (binding, vnode) => {
|
|||
binding?.instance?.appContext?.appContext?.provides?.pinia
|
||||
|
||||
try {
|
||||
// 如果获取到Pinia实例，使用它来创建userStore
|
||||
if (piniaInstance) {
|
||||
return useUserStore(piniaInstance)
|
||||
}
|
||||
// 否则尝试使用全局Pinia实例
|
||||
return useUserStore()
|
||||
} catch (error) {
|
||||
console.warn('[v-permission] failed to access pinia instance:', error)
|
||||
|
|
@ -52,47 +99,106 @@ const getUserStore = (binding, vnode) => {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换元素可见性
|
||||
* 根据权限验证结果控制元素的显示或隐藏
|
||||
* 保留原始的display样式以便需要时恢复
|
||||
* @param {HTMLElement} el - DOM元素
|
||||
* @param {boolean} shouldShow - 是否显示元素
|
||||
*/
|
||||
const toggleElementVisibility = (el, shouldShow) => {
|
||||
if (shouldShow) {
|
||||
// 显示元素：恢复原始display样式或使用默认值
|
||||
el.style.display = el.__vOriginalDisplay || ''
|
||||
} else {
|
||||
// 隐藏元素：先保存当前display样式，然后设置为none
|
||||
if (el.style.display !== 'none') {
|
||||
el.__vOriginalDisplay = el.style.display
|
||||
}
|
||||
el.style.display = 'none'
|
||||
}
|
||||
// 记录权限控制状态，用于后续更新
|
||||
el.__vPermissionVisible = shouldShow
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理指令逻辑
|
||||
* 指令的核心处理函数，连接权限验证和DOM操作
|
||||
* @param {HTMLElement} el - DOM元素
|
||||
* @param {Object} binding - 指令绑定对象
|
||||
* @param {Object} vnode - 虚拟节点
|
||||
*/
|
||||
const handleDirective = (el, binding, vnode) => {
|
||||
// 获取用户状态存储
|
||||
const userStore = getUserStore(binding, vnode)
|
||||
|
||||
// 评估用户是否有权限
|
||||
const shouldShow = evaluatePermission(userStore, binding.value, binding.modifiers)
|
||||
|
||||
// 根据权限控制元素可见性
|
||||
toggleElementVisibility(el, shouldShow)
|
||||
}
|
||||
|
||||
/**
|
||||
* 注册权限指令
|
||||
* 在Vue应用中全局注册v-permission指令
|
||||
* 支持Vue 2和Vue 3的不同API
|
||||
* @param {Object} appOrVue - Vue应用实例或Vue构造函数
|
||||
*/
|
||||
export const registerPermissionDirective = (appOrVue) => {
|
||||
// 参数验证
|
||||
if (!appOrVue) return
|
||||
|
||||
// 定义Vue 3的指令配置
|
||||
const directiveConfig = {
|
||||
mounted: handleDirective,
|
||||
updated: handleDirective,
|
||||
beforeMount: handleDirective,
|
||||
beforeUpdate: handleDirective
|
||||
mounted: handleDirective, // 元素挂载时
|
||||
updated: handleDirective, // 元素更新时
|
||||
beforeMount: handleDirective, // 元素挂载前
|
||||
beforeUpdate: handleDirective // 元素更新前
|
||||
}
|
||||
|
||||
// 根据Vue版本进行兼容处理
|
||||
if (typeof appOrVue.directive === 'function') {
|
||||
// Vue3
|
||||
// Vue 3 使用 app.directive 注册
|
||||
appOrVue.directive('permission', directiveConfig)
|
||||
} else if (typeof appOrVue.prototype?.directive === 'function' || typeof appOrVue.directive === 'function') {
|
||||
// Vue2 global Vue constructor
|
||||
// Vue 2 使用 Vue.directive 注册
|
||||
const VueCtor = appOrVue.prototype?.constructor || appOrVue
|
||||
VueCtor.directive('permission', {
|
||||
inserted: handleDirective,
|
||||
update: handleDirective,
|
||||
componentUpdated: handleDirective
|
||||
inserted: handleDirective, // 元素插入父节点时
|
||||
update: handleDirective, // 元素更新时
|
||||
componentUpdated: handleDirective // 组件更新后
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用示例：
|
||||
*
|
||||
* // 1. 注册指令（在main.js中）
|
||||
* import { registerPermissionDirective } from '@/directives/permission'
|
||||
* import { createApp } from 'vue'
|
||||
* const app = createApp(App)
|
||||
* registerPermissionDirective(app)
|
||||
*
|
||||
* // 2. 在组件中使用
|
||||
*
|
||||
* // 2.1 基础用法：用户需要任一权限
|
||||
* <button v-permission="['user:view', 'user:edit']">编辑用户</button>
|
||||
*
|
||||
* // 2.2 使用all修饰符：用户需要拥有所有权限
|
||||
* <button v-permission.all="['user:view', 'user:edit']">高级编辑</button>
|
||||
*
|
||||
* // 2.3 使用requireAll修饰符（效果同all）
|
||||
* <button v-permission.requireAll="['user:view', 'user:edit']">高级编辑</button>
|
||||
*
|
||||
* // 2.4 字符串权限
|
||||
* <button v-permission="'user:view'">查看用户</button>
|
||||
*
|
||||
* // 2.5 逗号分隔的权限字符串
|
||||
* <button v-permission="'user:view,user:edit'">编辑用户</button>
|
||||
*/
|
||||
|
||||
// 默认导出
|
||||
export default registerPermissionDirective
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user