应将权限逻辑封装在 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，而是返回一个带语义键名的对象，模板中直接解构使用：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
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')
}
})
这样模板就变得干净又直观：
<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 有完整类型提示和错误检查。
