vue3按钮权限管理

### Vue3 中实现按钮级别权限管理

在Vue 3项目中，通过自定义指令可以有效地实现按钮级别的权限控制。这不仅提高了代码的可维护性和重用性，还使得权限逻辑更加清晰。

#### 创建自定义权限指令 `v-has`

为了简化按钮权限的判断逻辑，建议创建一个名为`v-has`的自定义指令[^1]：

// main.js 或者相应的初始化文件中注册全局指令
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('has', {
    mounted(el, binding, vnode) {
        const { value } = binding;
        let permissions;

        // 获取当前用户的权限列表，这里假设是从store或者其他地方获取到的数据
        if (process.client && window.store.state.user.permissions) {
            permissions = window.store.state.user.permissions;
        }

        // 如果用户没有此权限，则移除DOM节点
        if (!value || !permissions.includes(value)) {
            el.parentNode.removeChild(el);
        }
    },
});

上述代码片段展示了如何定义并挂载一个全局自定义指令`v-has`，它会在组件编译完成后执行一次检查操作，依据传入的角色标识符(`binding.value`)对比已授权的功能集合(即`permissions`)决定是否保留对应的HTML元素[^2]。

#### 应用于模板中的实例展示

当完成自定义指令设置之后，在实际使用的场景下只需要简单地将其附加至目标标签即可达到预期效果:

<template>
  <!-- 编辑按钮仅对具有'edit'权限的用户可见 -->
  <el-button v-has="'edit'" type="primary">编辑</el-button>

  <!-- 删除按钮仅对具有'delete'权限的用户可见 -->
  <el-button v-has="'delete'" type="danger">删除</el-button>
</template>

这样做的好处在于能够保持业务逻辑与UI结构分离的同时，也方便后续扩展其他类型的权限验证机制[^3]。