Vue路由与导航守卫异常：登录后无法跳转至首页

问题分析 #

你遇到的核心问题是：登录成功后已设置用户状态，但router.push('/')未生效，仍停留在登录页。以下是具体原因排查和解决方法：

可能的原因1：表单默认提交行为未阻止 #

如果handleSubmit是表单的提交事件处理函数，未阻止表单默认提交会导致页面刷新，直接打断路由跳转逻辑。页面刷新后，虽然本地存储有token，store会恢复用户状态，但路由会停留在登录页。

解决方法：
在handleSubmit开头添加事件阻止：

async function handleSubmit(event) {
  event.preventDefault() // 阻止表单默认提交行为
  isLoading.value = true
  // 后续登录逻辑...
}

同时确保表单的@submit绑定正确：

<form @submit="handleSubmit">
  <!-- 表单输入项 -->
</form>

可能的原因2：路由跳转未捕获错误 #

router.push返回Promise，若跳转被路由守卫拦截或路径配置有误，不会主动抛出错误，导致无法排查问题。

解决方法：
为router.push添加错误捕获，查看具体失败原因：

router.push('/').catch(err => {
  console.error('首页跳转失败:', err)
})

可能的原因3：导航守卫状态同步问题 #

虽然当前导航守卫逻辑看似正常，可优化确保store状态的响应式同步，避免因实例化问题导致状态不同步。

优化后的导航守卫：
确保导入全局的pinia实例（而非每次创建新实例）：

import pinia from '@/stores/pinia' // 导入全局创建的pinia实例
import { useAuthStore } from '@/stores/auth'

router.beforeEach((to, from, next) => {
  const store = useAuthStore(pinia)
  if (to.name !== 'login' && !store.isAuthenticated) {
    next({ name: 'login' })
  } else {
    next()
  }
})

代码优化建议：统一异步代码风格 #

你的登录逻辑混用了async/await和.then/.catch，易导致代码混乱和调试困难，建议统一为async/await风格：

async function handleSubmit(event) {
  event.preventDefault()
  isLoading.value = true
  try {
    if (pageType.value === 'signUp' && name.value && email.value && password.value) {
      await axios.post(url.value, {
        name: name.value,
        email: email.value,
        password: password.value
      })
      pageType.value = "login"
    } else if (pageType.value === 'login' && email.value && password.value) {
      const loginRes = await axios.post(`${url.value}/login`, {
        email: email.value,
        password: password.value
      })
      const token = loginRes.data.token
      localStorage.setItem('token', token)
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
      
      const userRes = await axios.get(`${url.value}/me`)
      setUser(userRes.data)
      await router.push('/') // 等待路由跳转完成
    }
  } catch (err) {
    console.log(err.response?.data?.message || err.message)
  } finally {
    isLoading.value = false
  }
}

验证步骤 #

1. 优先添加表单默认行为阻止，测试登录跳转是否正常
2. 若仍有问题，添加路由跳转的错误捕获，查看具体错误信息
3. 最后优化异步代码风格，提升代码可维护性

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