最轻量可控的权限控制方式是直接用Props传权限列表并配合v-if或自定义指令控制按钮显隐。父组件传入扁平权限数组（如['user:add','user:edit']），子组件通过defineProps声明接收，模板中用permissions.includes('xxx')或计算属性判断显隐，支持响应式更新与扩展。
直接用 Props 传权限列表，再配合 v-if 或自定义指令控制按钮显隐，是最轻量、最可控的方式。不需要引入 Pinia 或全局状态，避免把简单逻辑复杂化。
权限列表作为 Props 传入子组件
父组件拿到后端返回的权限标识数组（如 ['user:add', 'user:edit', 'order:delete']），通过 props 传给需要做按钮控制的子组件：
- 子组件明确声明接收该 prop，带类型校验和默认值：
const props = defineProps({
permissions: {
type: Array as PropType<string[]>,
default: () => []
}
})
</script>
- 确保父组件传的是扁平数组（不是树形结构），便于快速判断：
props.permissions.includes('user:add')
模板中用 v-if 直接控制按钮显隐
在子组件模板里，每个操作按钮都基于权限标识做条件渲染：
<template><button v-if="permissions.includes('user:add')" @click="handleAdd">新增用户</button>
<button v-if="permissions.includes('user:edit')" @click="handleEdit">编辑</button>
<button v-if="permissions.includes('order:delete')" @click="handleDelete">删除</button>
</template>
- 简洁清晰，无额外依赖，适合单页内局部权限控制
- 权限变更时，只要父组件更新
permissions数组并重新传入，子组件自动响应
封装成计算属性提升可读性
避免模板中重复写 permissions.includes(...)，提取为计算属性：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
const hasAddPermission = computed(() => props.permissions.includes('user:add'))const hasEditPermission = computed(() => props.permissions.includes('user:edit'))
- 模板中直接用
v-if="hasAddPermission"，语义更明确 - 后续扩展（如加日志、埋点）也容易在计算属性里统一处理
进阶：用自定义指令统一管理（可选）
如果项目中按钮权限判断大量重复，可注册全局指令 v-permission：
mounted(el, binding) {
const perms = getCurrentInstance()?.proxy?.$props?.permissions || []
if (!perms.includes(binding.value)) {
el.style.display = 'none'
}
}
})
- 模板写法更简洁：
<button v-permission="'user:add'">新增</button> - 注意：指令内需能访问到当前权限列表，推荐配合 provide/inject 或顶层 props 传递
不复杂但容易忽略：权限数据必须是响应式的，且子组件不能缓存或深拷贝 permissions 数组，否则更新后无法触发视图重绘。
