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

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

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

一、指令核心功能

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

1. 超级管理员自动放行，无需额外判断

2. 普通用户支持两种权限控制模式：

   • 隐藏模式：无权限时直接移除 DOM 元素
   • 禁用模式：无权限时保留元素但添加禁用状态和样式

二、完整代码实现

// 权限控制指令：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. 隐藏模式（默认）

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

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

2. 禁用模式

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

<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 的状态管理可实现全系统权限统一管控。