如何利用组合式 API 实现复杂权限校验系统？导航守卫与状态结合-Vue.js-PHP中文网

组合式 API 配合 Vue Router 导航守卫可构建响应式权限系统：统一管理权限状态、路由前实时校验、支持异步加载与动态路由；通过 useAuthStore 封装角色/权限逻辑，全局守卫中调用 canAccess 判断，动态添加路由并实现组件级细粒度控制。

如何利用组合式 api 实现复杂权限校验系统？导航守卫与状态结合

组合式 API 提供了更灵活的状态组织与逻辑复用能力，配合 Vue Router 的导航守卫，可以构建出响应式、可维护、支持细粒度控制的权限校验系统。核心在于：将权限状态（如用户角色、路由元信息、动态权限列表）统一管理，并在路由跳转前实时校验，同时支持异步权限加载与守卫中断。

避免在每个守卫中重复请求或判断，把权限数据抽象为响应式状态：

定义一个 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() 可用于菜单渲染，避免权限与菜单不一致

权限不止于路由层面，按钮、Tab、字段等都需响应式控制，利用组合式 API 天然优势：

在业务组件中 const { canAccess, permissions } = useAuthStore()，然后 v-if="canAccess({ name: 'UserEdit' })" 或 :disabled="!permissions.includes('user:update')"
封装 usePermission Hook，接收权限码或路由标识，内部监听 permissions 变化并返回布尔值，自动响应权限变更（如管理员临时授予权限）
避免在模板中写复杂判断逻辑，把校验收敛到组合函数中，便于测试与复用