登录拦截校验需在全局前置守卫中判断目标路由是否含meta.requiresAuth标识，并检查localStorage中的token是否存在；未登录则跳转/login并携带重定向参数，已登录则放行，同时应校验token过期等有效性。

在全局前置守卫中实现登录拦截校验，核心是判断目标路由是否需要认证，并检查当前用户是否具备有效登录状态。只要逻辑清晰、状态来源可靠，整个过程很直接。

明确哪些路由需要拦截

在路由配置中，为受保护的页面添加 meta.requiresAuth: true 标识：

• /dashboard、/profile、/order 等业务页应设为 requiresAuth: true
• /login、/register、/public 等公开页不加该字段或显式设为 false
• 支持嵌套路由：只要任意一层 matched 路由有 requiresAuth，就触发校验

在 beforeEach 中执行校验逻辑

守卫函数接收 to、from、next 三个参数。关键操作是：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 用 to.matched.some(r => r.meta.requiresAuth) 判断是否需拦截
• 从 localStorage、sessionStorage 或 Vuex store 中读取 token 或登录标识
• 未登录时调用 next({ path: '/login', query: { redirect: to.fullPath } })，保留原路径便于登录后跳回
• 已登录则调用 next() 放行；校验失败也可 next(false) 中断导航

注意 token 的有效性与刷新场景

仅检查 token 是否存在不够严谨，还需考虑：

立即学习“前端免费学习笔记（深入）”；

• token 过期：建议结合 exp 字段做时间校验，或统一用接口验证（可配合 beforeResolve）
• 页面刷新：localStorage 中的 token 仍有效，守卫会自动触发，无需额外处理
• 登出清理：退出时务必清除 token 并重置 store 状态，否则守卫可能误判

简单可靠的示例代码

放在 router/index.js 创建 router 实例之后：

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const token = localStorage.getItem('token')

  if (requiresAuth && !token) {
    next({ path: '/login', query: { redirect: to.fullPath } })
  } else if (requiresAuth && token) {
    // 可选：这里加 token 解析或过期检查
    next()
  } else {
    next()
  }
})