如何利用 computed 实现权限系统的动态按钮渲染？中后台实战方案-Vue.js-PHP中文网

用 computed 实现动态按钮渲染的关键是将角色到按钮可见性的映射转为响应式、可复用、易维护的计算逻辑，通过独立权限映射表、响应式角色读取、set 高效判断及固定字段布尔对象，实现模板零冗余控制。

如何利用 computed 实现权限系统的动态按钮渲染？中后台实战方案

用 computed 实现动态按钮渲染，关键是把「角色 → 按钮可见性」的映射变成响应式、可复用、易维护的计算逻辑，而不是在模板里堆 v-if="role === 'admin' || hasPermission('edit')" 这类硬编码判断。

定义清晰的权限映射表

把角色和按钮操作的对应关系抽成常量对象，避免散落在各处：

比如 create、edit、delete、export 是通用操作标识，不绑定具体文字或组件
映射表建议放在独立文件（如 permissions.ts），方便多处 import：

const BUTTON_PERMISSIONS = {
  admin: ['create', 'edit', 'delete', 'export'],
  operator: ['create', 'edit', 'export'],
  viewer: ['export']
};

后续增删角色或操作，只改这里，不碰业务组件。

从状态中安全读取用户角色

角色必须是响应式的，否则 computed 不会重新执行：

若用 Pinia，直接取 store.user.role 并包裹在 computed 中
若角色来自异步登录接口，确保它被正确赋值到响应式对象里（例如 ref 或 reactive），而不是普通变量
多角色场景下（如 ['operator', 'auditor']），需先扁平化合并权限，再生成可见性对象

用 computed 生成布尔配置对象

这个对象就是模板里的“开关总控”：

结构保持固定字段（create、edit 等），值为 true/false
内部用 includes 或 Set.has 判断，性能好且语义清晰
支持 fallback：当角色未定义或无匹配权限时，默认全 false，更安全

const buttonVisible = computed(() => {
  const role = userRole.value;
  const permissions = Array.isArray(role)
    ? new Set(role.flatMap(r => BUTTON_PERMISSIONS[r] || []))
    : new Set(BUTTON_PERMISSIONS[role] || []);
  return {
    create: permissions.has('create'),
    edit: permissions.has('edit'),
    delete: permissions.has('delete'),
    export: permissions.has('export')
  };
});