provide 是 vue 3 权限系统全局注入的轻量高效方案，通过 symbol 键 provide reactive 权限对象，支持 inject 获取、组合式函数封装、指令/组件多层使用，并需与路由、菜单、api 协同及后端二次校验。

Provide 是 Vue 3 实现权限系统全局注入的轻量高效方案，它绕过 Vuex 的复杂性，也不依赖 props 层层透传，而是将权限状态与校验逻辑“提供”给整棵组件树，让任意深层组件都能安全、响应式地获取和使用。

权限实例的封装与 provide 注入

核心是创建一个 reactive 的权限对象，并在应用启动时统一注入。这个对象至少包含当前用户权限标识（如位图整数或权限字符串数组）、校验方法（如 hasPermission(key)）以及可选的刷新机制。

• 推荐用 Symbol 作为注入 key，避免命名冲突：const PERMISSION_KEY = Symbol('permission')
• 权限数据建议从后端接口动态获取并存入 reactive 对象，例如：
  const permissionState = reactive({
    bits: ref(0), // 20位二进制权限位图
    list: ref([]), // 权限码数组，如 ['user:add', 'order:delete']
    has: (key: string) => list.value.includes(key) || (bits.value & PERMISSIONS[key]) !== 0
  })
• 在 main.ts 或根组件 setup 中调用：
  app.provide(PERMISSION_KEY, permissionState)

子组件中 inject 权限能力

任意组件（包括组合式 API 的 setup 或 script setup）均可通过 inject 获取权限实例，无需 import 具体实现，解耦清晰。

• 基础写法：
  import { inject } from 'vue'
  import { PERMISSION_KEY } from '@/constants/injectionKeys'
  const perm = inject(PERMISSION_KEY)
  if (!perm) throw new Error('Permission not provided')
• 更推荐封装成 composable：
  export function usePermission() {
    const perm = inject(PERMISSION_KEY)
    return {
      has: (key: string) => perm?.has?.(key) ?? false,
      bits: computed(() => perm?.bits),
    }
  }
• 模板中可配合 v-if 或自定义指令使用，例如：
  删除

按钮级权限控制的分层架构

真正的生产级按钮权限不是简单隐藏 DOM，而是一套可扩展、可调试、前后端协同的分层体系：

• 数据层：后端返回结构化权限数据（如位图字符串 "10100000000000000000" 或权限码列表），前端解析为统一格式并持久化到 localStorage 或 pinia
• 状态层：通过 provide 注入的 reactive 权限对象，承载实时权限状态与响应式校验逻辑
• 表现层：提供三种使用方式供不同场景选择：
  – 指令方式（v-permission="'user:edit'"）适合快速复用
  – 组合式函数（usePermission().has(...)）适合逻辑判断与条件渲染
  – 权限按钮组件（删除）内置 loading、tooltip、禁用态等增强体验
• 防护层：前端按钮控制仅为用户体验优化，所有敏感操作必须在对应 API 请求前做二次权限校验（如在 api 实例拦截器中检查权限），防止绕过 UI 直接调用接口

与路由、菜单、API 的协同设计

权限系统不是孤立模块，需与整个应用架构对齐：

• 动态菜单：菜单配置项中携带 permission 字段，渲染时通过 usePermission().has() 决定是否显示
• 路由守卫：在 router.beforeEach 中调用权限校验，无权访问的路由重定向到 403 页面
• API 实例注入：同样用 provide 注入封装好的 api 对象，其请求拦截器可自动读取当前权限上下文，补充 traceId 或做前置风控
• 调试支持：开发环境下暴露 window.$permission 供控制台实时查看/修改权限位，加速联调