Vue 权限控制神技！自定义 auth 指令优雅实现按钮级权限管理

在中后台系统开发中，按钮级别的权限控制是常见需求 ------ 不同角色用户看到的操作按钮可能不同，直接写 if-else 判断又会导致代码冗余混乱。今天分享一个 Vue 自定义指令v-auth，一行代码就能搞定按钮的显示、隐藏或禁用，大幅提升代码整洁度！

一、指令核心功能

这个v-auth指令基于 Vuex 存储的用户权限数据，实现两大核心能力：

超级管理员自动放行，无需额外判断
普通用户支持两种权限控制模式：
- 隐藏模式：无权限时直接移除 DOM 元素
- 禁用模式：无权限时保留元素但添加禁用状态和样式

二、完整代码实现

csharp 复制代码

// 权限控制指令：v-auth
Vue.directive('auth', {
  async inserted(el, binding) {
    const { value, modifiers } = binding;
    
    // 确保权限数据已加载，未加载则异步获取
    if (!store.getters.permissions) {
      //获取权限数据
    }
    
    const permissions = store.getters.permissions || []; // 兜底处理，避免报错

    // 超级管理员特权：拥有所有权限直接放行
    if (permissions.includes('*:*:*')) return;

    // 权限校验核心逻辑
    const isDisabled = modifiers.disabled; // 是否启用禁用模式
    const hasPermission = permissions.includes(value); // 校验用户是否拥有目标权限
    
    if (!hasPermission) {
      if (isDisabled) {
        // 禁用模式：添加禁用属性和自定义样式
        el.disabled = true;
        el.classList.add('disabled-button');
      } else {
        // 隐藏模式：从DOM中移除元素
        el.parentNode?.removeChild(el);
      }
    }
  }
});

三、代码逻辑逐行解析

1. 指令触发时机

使用inserted钩子，在元素插入 DOM 后执行校验，确保操作目标元素存在。

2. 权限数据加载

先检查 Vuex 中是否已缓存权限数据
未加载则调用user/getInfo异步接口获取，等待加载完成再继续校验

3. 权限判断逻辑

超级管理员通过*:*:*标识直接放行，适配系统最高权限场景
普通用户通过binding.value获取需要校验的权限标识（如"user:add"）
通过binding.modifiers.disabled切换控制模式，灵活适配不同 UI 需求

四、实际使用场景

1. 隐藏模式（默认）

无权限时直接隐藏按钮，适用于非核心操作按钮：

ini 复制代码

<el-button v-auth="'user:add'">新增用户</el-button>

2. 禁用模式

无权限时保留按钮但禁用，适用于需要提示用户权限不足的场景：

ini 复制代码

<el-button v-auth.disabled="'user:edit'">编辑用户</el-button>

六、总结

按钮权限控制的工作流程图：

flowchart TD A(("① 用户登录")) --> B[系统初始化] B --> C[渲染带v-auth的组件] C --> D{指令解析} D --> |解析到v-auth节点| E["② inserted钩子触发"] E --> F{权限数据已加载?} F -- 否 --> G["③ 调用store.dispatch()"] G --> H[获取用户权限数据] H --> F F -- 是 --> I{是超级管理员?} I -- 是 --> J["✅ 放行渲染"] I -- 否 --> K["④ 权限校验"] K --> L{检查修饰符} L -- disabled --> M["⑤ 禁用模式处理"] L -- 无修饰符 --> N["⑤ 隐藏模式处理"] M --> O{权限匹配?} O -- 匹配 --> P["✅ 保持可用状态"] O -- 不匹配 --> Q["🛑 添加disabled属性"] N --> R{权限匹配?} R -- 匹配 --> S["✅ 正常显示"] R -- 不匹配 --> T["🛑 移除DOM节点"] Q --> U[结束] T --> U P --> U S --> U style A fill:#4CAF50,color:white style G fill:#2196F3,color:white style Q fill:#FF5722,color:white style T fill:#FF5722,color:white style J fill:#4CAF50,color:white

这个v-auth指令将权限控制逻辑封装复用，摆脱了模板中大量的权限判断代码，让权限管理更优雅、维护成本更低。适用于各类中后台系统的按钮、菜单等元素权限控制，搭配 Vuex 的状态管理可实现全系统权限统一管控。