Vue 依赖注入如何实现登录用户权限信息在整个后台管理布局中的共享

provide/inject 实现权限全局共享，核心是一次注入、处处可用：在根部 provide reactive 权限对象（含 list、has 方法等），子组件 inject 使用，配合 usePermission 封装、菜单/路由/指令校验及本地缓存恢复。

用 provide/inject 实现登录用户权限信息在后台管理布局中的全局共享，核心是“一次注入、处处可用”，不依赖 Pinia 或 Vuex 做中间搬运，也不靠 props 层层传递。关键在于把权限状态和校验能力封装成响应式对象，在应用根部统一提供，所有子组件按需注入使用。

在根组件或 main.ts 中统一 provide 权限实例

权限数据通常来自登录后的用户信息接口（如包含 buttons 数组或权限位图），应封装为 reactive 对象，并用 Symbol 作 key 防止冲突：

1. 定义唯一 Symbol：const PERMISSION_KEY = Symbol('permission')
2. 创建 reactive 权限对象，含权限列表、校验方法和刷新能力：例如 list: ref(['user:add', 'order:delete']), has: (key) => list.value.includes(key)
3. 在 main.ts 的 createApp 后调用 app.provide(PERMISSION_KEY, permissionState)，或在 App.vue 的 setup 中使用 provide(PERMISSION_KEY, permissionState)

任意组件中 inject 获取并安全使用

不需要 import 具体实现，只需通过 inject 拿到权限实例，配合组合式函数封装更清晰：

1. 基础写法：const perm = inject(PERMISSION_KEY)，建议加非空判断避免运行时错误
2. 推荐封装 usePermission() composable，返回 { has, bits } 等语义化方法，模板中可直接解构使用
3. 支持响应式：has 方法内部读取 ref 或 computed，确保权限变更后 v-if 或指令能自动更新

配合路由与菜单做一致性控制

provide 的权限对象不是孤立的，需与动态路由、菜单渲染协同工作：

1. 菜单生成时遍历路由配置，用 has(key) 判断是否显示某菜单项（key 可对应 route.meta.permissionCode）
2. 按钮级控制用 v-if="has('order:export')" 或自定义 v-permission 指令，指令内部调用 inject 获取校验能力
3. 路由守卫中也可 inject 权限实例，用于 beforeEnter 守卫做细粒度跳转拦截

注意持久化与刷新场景下的同步

页面刷新后权限状态不能丢失，需结合本地缓存与重新拉取：

1. 登录成功后，将权限数据存入 localStorage 或 sessionStorage
2. App 启动时优先从缓存恢复权限 state，再触发 refresh 接口更新（避免白屏等待）
3. provide 的 reactive 对象本身不自动持久化，需手动在初始化时 restore + watch 后端变更