feat: 添加 v-permission 指令实现按钮级权限控制

This commit is contained in:
张翔
2026-04-08 07:04:26 +08:00
parent 8fb3166356
commit 20d12c1b94
3 changed files with 160 additions and 0 deletions
@@ -0,0 +1,33 @@
import type { Directive, DirectiveBinding } from 'vue'
import { usePermissionStore } from '@/stores/permission'
export const permissionDirective: Directive = {
mounted(el: HTMLElement, binding: DirectiveBinding) {
const permissionStore = usePermissionStore()
const { arg, value } = binding
const checkType = arg || 'permission'
if (!value) {
console.warn('v-permission 指令需要提供权限值')
el.style.display = 'none'
return
}
let hasAccess = false
if (checkType === 'role') {
hasAccess = permissionStore.hasRole(value)
} else if (checkType === 'permission') {
hasAccess = permissionStore.hasPermission(value)
} else {
console.warn(`未知的权限检查类型: ${checkType}`)
el.style.display = 'none'
return
}
if (!hasAccess) {
el.style.display = 'none'
}
}
}