应将权限逻辑封装在 computed 中，定义角色-权限映射表并存于独立文件，确保角色字段响应式，返回结构化布尔对象供模板解构使用，支持多角色合并与动态权限叠加，避开副作用并利用 TypeScript 类型推导。

直接用 computed 封装权限逻辑，别在模板里写一长串 v-if="user.role === 'admin' && user.status !== 'locked' && permissions.includes('edit')" 这类表达式。它可读性差、无法复用、没法调试，还每次渲染都重算。

把权限规则抽成常量映射表

先定义清晰的角色-能力对照关系，比如：

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

这个对象建议放在独立文件（如 permissions.ts）中，便于全局复用和单元测试。角色字段要确保是响应式的——如果是从 Pinia 或 Vuex 拿的，记得用 computed(() => store.state.user.role) 包一层，否则权限判断不会随登录状态更新。

用 computed 返回结构化布尔对象

不返回单个 true/false，而是返回一个带语义键名的对象，模板中直接解构使用：

const can = computed(() => {
  const perms = ROLE_PERMISSIONS[userRole.value] || []
  return {
    create: perms.includes('create'),
    edit: perms.includes('edit'),
    delete: perms.includes('delete'),
    export: perms.includes('export')
  }
})

这样模板就变得干净又直观：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

<button v-if="can.create">新增</button>
<button v-if="can.edit">编辑</button>
<button v-if="can.delete">删除</button>

支持多角色或动态权限叠加

如果用户可能有多个角色（如 ['operator', 'auditor']），或权限来自后端接口（如 user.permissions 数组），只需微调计算逻辑：

• 合并多角色权限：用 [...new Set([...ROLE_PERMISSIONS[a], ...ROLE_PERMISSIONS[b]])]
• 优先用后端返回的权限数组：const perms = userPermissions.value || []，再做 includes 判断
• 细粒度控制时，可扩展为函数式判断，例如：can.edit = () => userRole.value === 'admin' || (userRole.value === 'operator' && !item.isArchived)

避开常见陷阱

computed 必须保持纯净：

• 不能发请求、改 data、操作 DOM
• 不能写 setTimeout、await、Promise.then
• 如果权限依赖异步结果（比如实时校验某操作是否被风控拦截），应由 watch 或 methods 处理并存入 ref，再让 computed 基于该 ref 做派生

类型安全方面，TypeScript 会自动推导 can 的类型为 { create: boolean; edit: boolean; ... }，模板中访问 can.xxx 有完整类型提示和错误检查。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！