利用computed实现权限控制，核心是将用户角色映射为按钮可见性配置，通过常量对象定义角色权限、computed动态生成布尔对象，并支持多角色合并与细粒度权限扩展。
利用 computed 实现权限控制，核心是把「用户角色 → 可见按钮」的映射逻辑封装成响应式计算属性，避免在模板中写冗余判断，也便于统一维护和测试。
定义角色与按钮权限的映射关系
先明确哪些角色能操作哪些功能。比如：
- 管理员（admin）：可新增、编辑、删除、导出
- 运营（operator）：可新增、编辑、导出
- 只读用户（viewer）：仅可导出
建议将映射表抽离为常量对象，便于复用和扩展：
const BUTTON_PERMISSIONS = {
admin: ['create', 'edit', 'delete', 'export'],
operator: ['create', 'edit', 'export'],
viewer: ['export']
}
在组件中声明当前用户角色
通常从 Vuex、Pinia 或登录后存入的全局状态中获取角色（如 userRole），确保它是响应式的：
// Vue 3 Composition API 示例 const store = useStore() const userRole = computed(() => store.state.user.role)
注意：如果角色来自异步登录接口，需确保它被正确包裹在 computed 中，否则后续权限判断不会自动更新。
用 computed 动态生成按钮可见性配置
基于角色查表，返回一个布尔对象，模板中直接绑定即可：
const buttonVisible = computed(() => {
const permissions = BUTTON_PERMISSIONS[userRole.value] || []
return {
create: permissions.includes('create'),
edit: permissions.includes('edit'),
delete: permissions.includes('delete'),
export: permissions.includes('export')
}
})
模板中使用简洁明了：
<button v-if="buttonVisible.create">新增</button> <button v-if="buttonVisible.edit">编辑</button> <button v-if="buttonVisible.delete">删除</button> <button v-if="buttonVisible.export">导出</button>
进阶：支持多角色与细粒度权限
若用户可能拥有多个角色（如 ['operator', 'auditor']），可合并权限：
const buttonVisible = computed(() => {
const roles = Array.isArray(userRole.value)
? userRole.value
: [userRole.value]
const allPermissions = new Set(
roles.flatMap(role => BUTTON_PERMISSIONS[role] || [])
)
return {
create: allPermissions.has('create'),
edit: allPermissions.has('edit'),
delete: allPermissions.has('delete'),
export: allPermissions.has('export')
}
})
如需更细粒度（如按菜单/接口级控制），可将权限字段改为后端返回的权限码数组（如 ['user:create', 'order:export']），再用字符串匹配替代静态枚举。
