管理后台通常需要把权限细化到按钮：没有权限的用户连按钮都不该看到。用自定义指令 v-permission 传入权限码数组，指令内部校验后直接把无权元素移除，比在每个按钮上写 v-if 更统一。

实现思路

mounted 时读取 binding.value 中的权限码列表，与用户权限集合取交集；无权限时调用 removeChild 把元素从页面移除。权限集合可从 Pinia store 读取，也可传入自定义校验函数增强灵活性。

指令代码

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

function check(value) {
    const store = useUserStore();
    const perms = store.permissions || [];
    // 传入字符串或数组都兼容
    const need = Array.isArray(value) ? value : [value];
    return need.every((p) => perms.includes(p));
}

const permission = {
    mounted(el, binding) {
        if (!check(binding.value)) {
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
};

export default permission;

注册与使用

<!-- main.js 中注册：app.directive("permission", permission) -->

<el-button v-permission="["system/user/add"]" type="primary">
    新增用户
</el-button>

扩展方向

  • 需要禁用而非隐藏时，可改为 el.disabled = true 保留样式占位；
  • 权限码来自接口时注意在登录后先拉取再渲染页面，避免指令误删；
  • 也可结合路由 meta.permission 与全局前置守卫做整条路由的权限拦截。

小结

v-permission 把权限判定收敛到指令层，模板保持干净，配合服务端二次校验即可实现可靠的按钮级权限控制。