Vue3+Vue Router4实现用户认证：登录后仍被异常重定向回登录页

具体问题拆解 #

结合你给出的路由、登录组件代码，出现的固定循环跳转问题，是以下几个逻辑遗漏共同导致的：

• 路由守卫完全没覆盖访客路由的拦截规则
  你给登录页配置了meta: { requiresVisitor: true }，但全局路由守卫里从来没读取过这个标记做判断。就算用户的Vuex状态已经把authenticated改成了true，只要路由停在登录页，没有任何逻辑会主动把用户导去仪表盘，页面就会一直卡在登录表单。
• 登录成功后没有主动跳转
  看你Login组件的登录逻辑：接口POST登录成功后，调用authUser拉取用户信息、commit更新Vuex状态，全程没有写任何触发路由跳转的代码。状态更新了，路由路径还是停在/login，页面自然不会变。
• 路由结构存在匹配歧义
  你定义了两个顶级路由块的path都是'/'，分别挂Dashboard和Auth布局，这种重复定义没有必要——登录页是绝对路径/login，不需要嵌在一个path:'/'的父路由下。
  更关键的是，你把404通配符路由/:pathMatch(.*)*嵌在DashboardLayout的子路由里，还给这个通配符配了requiresAuth: true的标记，会让本来不需要登录校验的路径也被纳入鉴权逻辑。
• 刷新时的状态时序问题（解释手动跳仪表盘被弹回的现象）
  手动在地址栏输入仪表盘地址属于整页刷新，此时Vuex的内存状态会被重置为初始的authenticated: false。路由守卫在应用初始化时就会执行，发现目标路由需要鉴权、当前状态是未登录，直接把用户重定向回登录页，根本等不到登录组件挂载后再去调接口恢复认证状态。
  这个过程就形成了死循环：刷新→守卫先跑→状态是false→跳登录→登录页挂载→请求接口拿到用户信息→状态改成true，但此时已经在登录页了，没有逻辑再把用户导回去。

对应的调整方案 #

1. 重构路由配置，消除匹配歧义 #

把404通配符移到整个路由数组的最后面，去掉嵌套路由里重复的绝对路径定义：

const routes = [
  // 需鉴权的业务布局
  {
    path: '/',
    component: DashboardLayout,
    children: [
      {
        path: '', // 空path自动继承父级路径，等价于之前的'/'
        component: Dashboard,
        name: 'dashboard',
        meta: { requiresAuth: true }
      },
      {
        path: 'logout',
        component: Logout,
        name: 'logout',
        meta: { requiresAuth: true }
      }
    ]
  },
  // 访客专属布局
  {
    path: '/',
    component: AuthLayout,
    children: [
      {
        path: 'login',
        component: Login,
        name: 'login',
        meta: { requiresVisitor: true }
      }
    ]
  },
  // 404通配符必须放在整个路由数组的最末尾
  {
    path: '/:pathMatch(.*)*',
    component: PageNotFound,
    name: 'page-not-found'
  }
]

2. 补全路由守卫的双向鉴权逻辑 #

加上已登录用户访问登录页的拦截，同时处理初始化时的状态等待，避免时序问题导致的错误跳转：

// 标记应用是否完成认证状态的初始化
let isAuthReady = false

router.beforeEach(async (to) => {
  // 首次进入应用时，先拉取服务端的认证状态，避免过早判断
  if (!isAuthReady) {
    try {
      await axios.get('/api/user')
      store.commit('setAuthenticated', true)
    } catch (err) {
      store.commit('setAuthenticated', false)
    } finally {
      isAuthReady = true
    }
  }

  const isAuthenticated = store.state.authenticated
  // 规则1：需鉴权的路由，未登录则跳转登录页
  if (to.meta.requiresAuth && !isAuthenticated) {
    return { name: 'login' }
  }
  // 规则2：访客专属路由（如登录页），已登录则直接跳仪表盘
  if (to.meta.requiresVisitor && isAuthenticated) {
    return { name: 'dashboard' }
  }
})

3. 登录成功后主动触发路由跳转 #

在Login组件里，状态更新完成后主动跳转到仪表盘，不要停留在当前登录页：

import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    // ...保留原有逻辑
    const handleLogin = async () => {
      try {
        // 先完成登录请求
        await axios.post('/login', auth.value)
        // 拉取用户信息，更新认证状态
        await authUser()
        // 主动跳转仪表盘
        router.push({ name: 'dashboard' })
      } catch (err) {
        console.log(err)
      }
    }
  }
}

容易踩的细节提醒 #

• 通配符路由永远不要放在路由数组的靠前位置，不然会拦截后面定义的正常静态路由。
• 路由守卫做鉴权判断前，一定要等服务端的认证状态拉取完成，不然会出现页面来回闪、重复跳转的问题。
• 不要在嵌套子路由里写和父级路径重复的绝对路径，会降低路由可读性，也容易触发匹配bug。

内容的提问来源于stack exchange，提问作者calin24