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 或自定义指令使用，例如：
<button v-if="has('user:delete')">删除</button>
按钮级权限控制的分层架构
真正的生产级按钮权限不是简单隐藏 DOM，而是一套可扩展、可调试、前后端协同的分层体系：
- 数据层：后端返回结构化权限数据（如位图字符串 "10100000000000000000" 或权限码列表），前端解析为统一格式并持久化到 localStorage 或 pinia
- 状态层：通过 provide 注入的 reactive 权限对象，承载实时权限状态与响应式校验逻辑
-
表现层：提供三种使用方式供不同场景选择：
– 指令方式（v-permission="'user:edit'"）适合快速复用
– 组合式函数（usePermission().has(...)）适合逻辑判断与条件渲染
– 权限按钮组件（<PermButton code="user:delete">删除</PermButton>）内置 loading、tooltip、禁用态等增强体验 - 防护层：前端按钮控制仅为用户体验优化，所有敏感操作必须在对应 API 请求前做二次权限校验（如在 api 实例拦截器中检查权限），防止绕过 UI 直接调用接口
与路由、菜单、API 的协同设计
权限系统不是孤立模块，需与整个应用架构对齐：
- 动态菜单：菜单配置项中携带 permission 字段，渲染时通过 usePermission().has() 决定是否显示
- 路由守卫：在 router.beforeEach 中调用权限校验，无权访问的路由重定向到 403 页面
- API 实例注入：同样用 provide 注入封装好的 api 对象，其请求拦截器可自动读取当前权限上下文，补充 traceId 或做前置风控
- 调试支持：开发环境下暴露 window.$permission 供控制台实时查看/修改权限位，加速联调
