组合式 API 配合 Vue Router 导航守卫可构建响应式权限系统：统一管理权限状态、路由前实时校验、支持异步加载与动态路由；通过 useAuthStore 封装角色/权限逻辑，全局守卫中调用 canAccess 判断，动态添加路由并实现组件级细粒度控制。
组合式 API 提供了更灵活的状态组织与逻辑复用能力，配合 Vue Router 的导航守卫，可以构建出响应式、可维护、支持细粒度控制的权限校验系统。核心在于：将权限状态（如用户角色、路由元信息、动态权限列表）统一管理，并在路由跳转前实时校验，同时支持异步权限加载与守卫中断。
权限状态集中管理：使用 provide/inject + ref/computed
避免在每个守卫中重复请求或判断，把权限数据抽象为响应式状态：
- 定义一个 useAuthStore 组合函数，内部用 ref 存储 userRole、permissions（如从接口获取的按钮级权限码数组），并用 computed 派生 canAccess(route) 方法
- 在根组件 setup 中调用并 provide，子组件或守卫中通过 inject 获取，保持单例与响应性
- 示例：若某路由 meta 配置 { requiredRoles: ['admin', 'editor'] }，则 canAccess 内部自动比对当前 userRole
导航守卫中接入权限逻辑：全局前置守卫 + 路由级元信息
在 router.beforeEach 中整合权限判断，而非仅靠路由配置硬编码：
- 先检查是否已登录（如 authStore.token 是否存在），未登录则重定向至登录页并保存目标路由（next({ path: '/login', query: { redirect: to.path } })）
- 再调用 authStore.canAccess(to) —— 若返回 false，根据策略处理：显示 403 页面、重定向首页、或静默拦截（next(false)）
- 支持异步权限：若 permissions 尚未加载，可 return authStore.loadPermissions().then(() => next())，实现守卫等待
动态路由与权限联动：按角色生成可访问路由表
前端路由不再全量注册，而是根据用户权限“按需生成”，提升安全性与加载效率：
- 后端返回该用户可访问的路由结构（含 path、name、meta 等），前端用 router.addRoute() 动态添加；或直接过滤预置路由表（routes.filter(r => authStore.hasRoutePermission(r))）
- 注意：动态添加后需确保导航守卫能识别新路由（Vue Router 会自动更新匹配器），且要处理刷新时的权限恢复（如从 localStorage 或 token 解析初始权限）
- 结合 router.getRoutes() 可用于菜单渲染，避免权限与菜单不一致
组件内细粒度控制：组合式 API 直接消费权限状态
权限不止于路由层面，按钮、Tab、字段等都需响应式控制，利用组合式 API 天然优势：
- 在业务组件中 const { canAccess, permissions } = useAuthStore()，然后 v-if="canAccess({ name: 'UserEdit' })" 或 :disabled="!permissions.includes('user:update')"
- 封装 usePermission Hook，接收权限码或路由标识，内部监听 permissions 变化并返回布尔值，自动响应权限变更（如管理员临时授予权限）
- 避免在模板中写复杂判断逻辑，把校验收敛到组合函数中，便于测试与复用
