下面给你一份 Vue 3 封装全局自定义指令实现按钮权限控制的完整实例（2025 最新版）。
包含：

  • 全局权限指令封装
  • 动态权限判断
  • Vue 全局注册
  • 组件内实际使用案例
  • 扩展：禁用按钮 / 隐藏按钮两种模式

可直接复制到项目使用！

🚀 Vue 3 全局自定义指令实现按钮权限控制（完整实例）

实现目标：

根据当前用户权限，自动隐藏或禁用按钮。

⭐ 一、目录结构建议

src/
 ├─ directives/
 │    └─ permission.js
 ├─ store/
 │    └─ user.js
 ├─ main.js
 └─ App.vue

⭐ 二、模拟用户权限 Store（实际项目可来自接口）

store/user.js

import { reactive } from "vue";

export const userStore = reactive({
  permissions: ["user:add", "user:edit"], // 用户实际拥有的权限
});

⭐ 三、封装全局权限指令 permission

directives/permission.js

import { userStore } from "@/store/user";

// mode = "remove": 无权限则从 DOM 删除（默认）
// mode = "disabled": 无权限则禁用按钮

export default {
  mounted(el, binding) {
    const { value, modifiers } = binding;

    if (!value) {
      console.error("v-permission 指令需要传入权限标识，如 v-permission=\"'user:add'\"");
      return;
    }

    const hasPermission = userStore.permissions.includes(value);

    if (!hasPermission) {
      // 如果使用 v-permission.disabled → 禁用按钮
      if (modifiers.disabled) {
        el.disabled = true;
        el.classList.add("is-disabled");
      } else {
        // 默认：直接从界面删除
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  }
};

🔥 支持两种模式

① 默认：删除按钮

<button v-permission="'user:delete'">删除</button>

② 禁用按钮

<button v-permission.disabled="'user:add'">编辑（禁用模式）</button>

⭐ 四、在 main.js 中全局注册指令

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");

⭐ 五、组件内使用示例（真实页面）

App.vue

<template>
  <div class="box">
    <h2>按钮权限示例</h2>

    <!-- 用户没有 delete 权限 → 按钮会被直接移除 -->
    <button v-permission="'user:delete'">删除用户（直接移除）</button>

    <!-- 用户没有 view 权限 → 按钮禁用 -->
    <button v-permission.disabled="'user:view'">查看用户（禁用）</button>

    <!-- 用户拥有 add 权限 -->
    <button v-permission="'user:add'">新增用户（展示）</button>
  </div>
</template>

效果（假设用户权限为 ["user:add", "user:edit"]）：

按钮状态
删除按钮被隐藏
查看按钮被禁用
新增按钮正常显示

⭐ 六、扩展功能（可选）

你可以扩展更多：

🔧 ① 多权限 OR

<button v-permission="['user:add','user:delete']"></button>

🔧 ② 多权限 AND

<button v-permission.all="['user:add','user:delete']"></button>

🔧 ③ 指令更新时实时生效

把 mounted 换成 updated

⭐ 七、权限判断方法可单独抽离

export function hasPermission(value) {
  return userStore.permissions.includes(value);
}

方便在组件、API、路由守卫中复用。

🎁 八、总结（可直接放博客里）

本方案特点：

  • 全局可用，组件零配置
  • 支持删除模式 / 禁用模式
  • 通过用户权限 store 判断
  • 可扩展多权限逻辑
  • 与实际后台权限系统高度兼容