v-permission 权限指令

用于按钮级别的权限控制，根据用户权限自动显示、隐藏或禁用元素。

基础用法

<template>
  <!-- 有权限时显示，无权限时移除元素 -->
  <el-button v-permission="'system:user:add'">新增用户</el-button>
  
  <!-- 有权限时显示，无权限时禁用 -->
  <el-button v-permission:disabled="'system:user:edit'">编辑</el-button>
  
  <!-- 有权限时显示，无权限时隐藏（display: none） -->
  <el-button v-permission.hide="'system:user:delete'">删除</el-button>
</template>

指令参数

参数	说明	示例
无	无权限时从 DOM 移除元素	v-permission="'system:user:add'"
:disabled	无权限时禁用元素	v-permission:disabled="'system:user:edit'"
.hide	无权限时隐藏元素	v-permission.hide="'system:user:delete'"

多权限检查

支持传入权限数组，只要有一个权限满足就显示：

<template>
  <!-- 有任意一个权限就显示 -->
  <el-button v-permission="['system:user:add', 'system:user:edit']">
    新增/编辑
  </el-button>
</template>

完整示例

<template>
  <div class="toolbar">
    <!-- 新增按钮 - 无权限时不显示 -->
    <el-button 
      v-permission="'system:user:add'" 
      type="primary" 
      @click="handleAdd"
    >
      <el-icon><Plus /></el-icon>新增
    </el-button>
    
    <!-- 编辑按钮 - 无权限时禁用 -->
    <el-button 
      v-permission:disabled="'system:user:edit'" 
      type="primary" 
      @click="handleEdit"
    >
      <el-icon><Edit /></el-icon>编辑
    </el-button>
    
    <!-- 删除按钮 - 无权限时隐藏 -->
    <el-button 
      v-permission.hide="'system:user:delete'" 
      type="danger" 
      @click="handleDelete"
    >
      <el-icon><Delete /></el-icon>删除
    </el-button>
    
    <!-- 导出按钮 - 多权限检查 -->
    <el-button 
      v-permission="['system:user:export', 'system:user:import']" 
      @click="handleExport"
    >
      <el-icon><Download /></el-icon>导出
    </el-button>
  </div>
</template>

<script setup>
import { Plus, Edit, Delete, Download } from '@element-plus/icons-vue'

const handleAdd = () => {
  console.log('新增')
}

const handleEdit = () => {
  console.log('编辑')
}

const handleDelete = () => {
  console.log('删除')
}

const handleExport = () => {
  console.log('导出')
}
</script>

实现原理

指令通过检查用户权限列表来决定元素的处理方式：

1. 默认模式：从 DOM 中移除元素
2. disabled 模式：添加禁用样式并阻止点击事件
3. hide 模式：设置 display: none

注意事项

1. 权限标识格式建议：模块:功能:操作，如 system:user:add
2. 权限数据存储在 Pinia 的 auth store 中
3. 指令会在权限变化时自动更新
4. 组件卸载时会自动清理事件监听器

相关配置

在 main.ts 中注册指令：

import { createApp } from 'vue'
import App from './App.vue'
import permissionDirective from '@/directives/permission'

const app = createApp(App)

// 注册权限指令
app.directive('permission', permissionDirective)

app.mount('#app')