最轻量可控的权限控制方式是直接用props传权限列表并配合v-if或自定义指令控制按钮显隐。父组件传入扁平权限数组（如['user:add','user:edit']），子组件通过defineprops声明接收，模板中用permissions.includes('xxx')或计算属性判断显隐，支持响应式更新与扩展。

直接用 Props 传权限列表，再配合 v-if 或自定义指令控制按钮显隐，是最轻量、最可控的方式。不需要引入 Pinia 或全局状态，避免把简单逻辑复杂化。

权限列表作为 Props 传入子组件

父组件拿到后端返回的权限标识数组（如 ['user:add', 'user:edit', 'order:delete']），通过 props 传给需要做按钮控制的子组件：

• 子组件明确声明接收该 prop，带类型校验和默认值：

<script setup lang="ts"><br>const props = defineProps({<br> permissions: {<br> type: Array as PropType<string[]>, <br> default: () => []<br> }<br>})<br></script>

• 确保父组件传的是扁平数组（不是树形结构），便于快速判断：props.permissions.includes('user:add')

模板中用 v-if 直接控制按钮显隐

在子组件模板里，每个操作按钮都基于权限标识做条件渲染：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 简洁清晰，无额外依赖，适合单页内局部权限控制
• 权限变更时，只要父组件更新 permissions 数组并重新传入，子组件自动响应

封装成计算属性提升可读性

避免模板中重复写 permissions.includes(...)，提取为计算属性：

const hasAddPermission = computed(() => props.permissions.includes('user:add'))
const hasEditPermission = computed(() => props.permissions.includes('user:edit'))

• 模板中直接用 v-if="hasAddPermission"，语义更明确
• 后续扩展（如加日志、埋点）也容易在计算属性里统一处理

进阶：用自定义指令统一管理（可选）

如果项目中按钮权限判断大量重复，可注册全局指令 v-permission：

app.directive('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 数组，否则更新后无法触发视图重绘。

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