CUI

Appearance

cuixingjian
987
5m

permission 权限控制指令 ​

根据用户权限动态控制元素的可见性、可交互性或是否渲染，支持多种校验策略与处理模式。

安装与引入 ​

按需导入（推荐） ​

ts
import { VPermission } from '@cuixingjian/cui-utils'

全局注册 ​

ts
import { createApp } from 'vue'
import { VPermission } from '@cuixingjian/cui-utils'

const app = createApp(App)
app.directive('permission', VPermission)
app.mount('#app')

局部注册 ​

vue
<script setup lang="ts">
import { VPermission as vPermission } from '@cuixingjian/cui-utils'
</script>

<template>
  <button v-permission="'admin'">管理员操作</button>
</template>

效果演示 ​

交互式演示 ​

切换权限查看按钮状态变化。

使用代码 ​

基本用法：

vue
<template>
  <button v-permission="'user.create'">新增用户</button>
</template>

多权限（任一满足）：

vue
<template>
  <button v-permission="{ value: ['user.create', 'admin'], strategy: 'any' }">
    新增
  </button>
</template>

禁用模式：

vue
<template>
  <button v-permission="{ value: 'user.delete', mode: 'disable' }">
    删除
  </button>
</template>

自定义校验：

vue
<script setup lang="ts">
function hasPermission(perm: string) {
  return userPerms.includes(perm)
}
</script>

<template>
  <button v-permission="{ value: 'admin', check: hasPermission }">
    管理员操作
  </button>
</template>

API 说明 ​

指令值类型 ​

类型说明示例
string单个权限值v-permission="'admin'"
Array多个权限值v-permission="['user.create', 'admin']"
Object配置对象v-permission="{ value: 'admin', mode: 'hide' }"

配置选项 (PermissionOptions) ​

参数类型默认值说明
valuestring | string[]—需要校验的权限值
strategy'any' | 'all' | 'not''any'校验策略
mode'hide' | 'disable' | 'remove''hide'处理方式
enabledbooleantrue是否启用指令
permissionsstring[]—当前用户权限集合
check(perm: string) => boolean—自定义校验函数
onGranted(el: Element) => void—校验通过回调
onDenied(el: Element) => void—校验不通过回调

注意事项 ​

校验策略 ​

  • any（任一满足）：默认策略，权限列表中任一满足即可
  • all（全部满足）：必须拥有所有权限
  • not（全部不满足）：用于游客可见内容

处理模式 ​

  • hide（隐藏）：保留布局空间，元素不可见
  • disable（禁用）：元素可见但禁用，设置 aria-disabled
  • remove（移除）：完全从 DOM 移除

权限校验 ​

  • 优先使用 check 函数
  • 其次使用 permissions 列表
  • 建议统一权限管理入口

无障碍支持 ​

  • 禁用模式自动设置 aria-disabled
  • 移除可聚焦性
  • 保持页面可操作性

源码展示 ​

展开查看完整源码
ts
import type { Directive } from 'vue'
import { withInstallDirective } from '../install'

export type PermissionValue = string | string[]
export type PermissionStrategy = 'any' | 'all' | 'not'
export type PermissionMode = 'hide' | 'disable' | 'remove'

export interface PermissionOptions {
  value: PermissionValue
  strategy?: PermissionStrategy
  mode?: PermissionMode
  enabled?: boolean
  permissions?: string[]
  check?: (perm: string) => boolean
  onGranted?: (el: Element) => void
  onDenied?: (el: Element) => void
}

// 详见 packages/utils/directives/permission.ts
export const VPermission = withInstallDirective(permission, 'permission')