Vue的自定义指令实现按钮权限控制的最佳实践

在现代Web应用中，基于用户角色的权限控制是常见需求。按钮级别的权限控制能确保用户界面与后端权限模型保持一致，提升安全性。直接在业务组件中写大量 if/else 判断权限的代码会显得冗余且难以维护。Vue的自定义指令为此提供了优雅的解决方案。

准备工作：权限数据源

首先，你需要一个地方来存储当前用户的权限信息。通常在状态管理库（如Vuex或Pinia）中。

// store/user.js (Pinia 示例)
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: {
      permissions: ['edit', 'delete', 'view'] // 假设用户拥有这些权限码
    }
  }),
  getters: {
    hasPermission: (state) => (permission) => {
      return state.userInfo.permissions.includes(permission);
    }
  }
});

第一步：创建自定义指令

创建一个专门的文件来定义你的权限指令。

// src/directives/permission.js
import { useUserStore } from '@/store/user';

export const permission = {
  mounted(el, binding) {
    const { value } = binding;
    const userStore = useUserStore();
    const hasPermission = userStore.hasPermission(value);

    if (!hasPermission) {
      // 无权限时的处理逻辑
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
};

第二步：全局注册自定义指令

在Vue应用的入口文件中，将这个指令注册为全局指令。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { permission } from './directives/permission';

const app = createApp(App);

app.directive('permission', permission);

app.mount('#app');

第三步：在模板中使用指令

现在，你可以在任何按钮组件上使用 v-permission 指令了。

<template>
  <div>
    <button v-permission="'edit'">编辑</button>
    <button v-permission="'delete'">删除</button>
    <button v-permission="'view'">查看</button>
    <button v-permission="'export'">导出</button> <!-- 假设用户没有此权限 -->
  </div>
</template>

当用户没有 export 权限时，对应的按钮将不会被渲染到DOM中。

进阶实践：更灵活的权限控制

1. 支持多种权限判断

修改指令，使其支持传入一个权限数组，只要用户拥有其中一个权限，按钮就显示。

// src/directives/permission.js (修改后)
import { useUserStore } from '@/store/user';

export const permission = {
  mounted(el, binding) {
    checkPermission(el, binding);
  },
  updated(el, binding) {
    // 当指令的值或依赖的数据变化时，重新检查
    checkPermission(el, binding);
  }
};

function checkPermission(el, binding) {
  const { value } = binding;
  const userStore = useUserStore();

  let hasPermission = false;
  if (Array.isArray(value)) {
    hasPermission = value.some(p => userStore.hasPermission(p));
  } else {
    hasPermission = userStore.hasPermission(value);
  }

  if (!hasPermission) {
    el.parentNode && el.parentNode.removeChild(el);
  }
}

使用方式:

<button v-permission="['edit', 'delete']">编辑或删除</button>

2. 动态权限更新

当用户权限发生变化时（例如，通过后台操作），需要重新评估按钮的显示状态。由于指令的钩子函数在组件挂载时只执行一次，所以需要手动触发更新。上面的 updated 钩子已经解决了这个问题，当权限数据变化时，updated 会被触发，从而重新执行 checkPermission 函数。

3. 与UI组件库集成

很多UI组件库（如Element Plus）的按钮组件有 disabled 属性。我们可以修改指令，使其在无权限时禁用按钮而不是隐藏。

// src/directives/permission.js (集成UI库版本)
import { useUserStore } from '@/store/user';

export const permission = {
  mounted(el, binding) {
    checkPermission(el, binding);
  },
  updated(el, binding) {
    checkPermission(el, binding);
  }
};

function checkPermission(el, binding) {
  const { value } = binding;
  const userStore = useUserStore();

  let hasPermission = false;
  if (Array.isArray(value)) {
    hasPermission = value.some(p => userStore.hasPermission(p));
  } else {
    hasPermission = userStore.hasPermission(value);
  }

  if (!hasPermission) {
    // 禁用按钮，并添加一个类名表示无权限状态
    el.disabled = true;
    el.classList.add('is-disabled');
  } else {
    el.disabled = false;
    el.classList.remove('is-disabled');
  }
}

然后在CSS中定义 .is-disabled 的样式，使其看起来像是被禁用。

/* 在你的全局样式文件中 */
.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

Mermaid 流程图