背景

登录检查散落在页面 mounted 中,会产生页面先闪一下再跳转的体验。路由守卫可以集中入口策略,但安全权限仍由服务端裁决。

核心判断

  1. 用路由 meta 表达入口需求,集中处理登录状态。
  2. 需要异步恢复会话时,等待明确的初始化结果。
  3. 登录页避免保护循环,redirect 参数仅接受合法站内路由。

最小示例

下面保留核心逻辑;业务类型、调用入口和环境配置按项目补齐。

router.beforeEach((to) => { if (to.meta.requiresAuth && !auth.isLoggedIn()) return { name: "login", query: { redirect: to.fullPath } }; return true; });

边界与误区

前端守卫不能阻止直接访问 API,也不能证明令牌仍然有效。会话过期、刷新失败和无权限应有不同的跳转与提示策略。

验证方式

覆盖首次刷新受保护页面、会话过期、登录后返回和退出后后退;检查恶意 redirect 不会导致外部跳转。

小结

守卫只负责身份和粗粒度权限,重定向目标需编码并防止循环。