Vue Router结合Firebase鉴权：登录成功后页面无法正常跳转问题

实际触发的异常链路 #

你观察到的现象本质是整个登录流程被路由守卫反复拦截，完整执行路径是：

1. 用户在登录页输入凭证，触发Firebase邮箱密码登录成功
2. Vuex逻辑执行router.push({name:'Products'})，导航到需要鉴权的dashboard子路由
3. 全局前置守卫被触发，检测目标路由带requiresAuth元信息
4. 守卫读取localStorage.getItem('jwt')，因为从未有代码写入过这个字段，结果永远是null
5. 守卫执行重定向，把导航目标切回/login页面

整个导航切换过程在毫秒级完成，最终页面停留在登录页，表现为“登录成功后URL没有发生预期跳转”。
你提到“手动输入dashboard地址时鉴权逻辑正常触发”，本质就是这个拦截动作——守卫把访问dashboard的请求重定向回了登录页，并不是鉴权放行逻辑生效。

逐点梳理代码问题 #

• 对Firebase的持久化行为存在认知偏差
  Firebase默认不会将认证JWT以jwt为键名存入浏览器localStorage。Firebase的认证状态会存储在自定义格式的键值下，和你路由守卫检测的jwt字段完全没有关联，这也是守卫永远检测不到有效token的核心原因。
• 路由守卫逻辑存在分支缺失
  现有前置守卫仅实现了“无jwt则重定向登录”的分支，缺少“检测到有效jwt则放行导航”的逻辑：

  router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.requiresAuth)) {
        if (localStorage.getItem('jwt') == null) {
            next({ path: '/login', params: { nextUrl: to.fullPath } })
        } 
        // 此处缺失 else 分支：jwt存在时没有调用 next() 放行导航
    } else {
        next()
    }
  })
  

  就算后续手动把jwt写入localStorage，只要进入需要鉴权的路由，没有显式调用next()就会导致路由导航永久挂起、页面白屏。
• 登录流程缺失token写入步骤
  整个Vuex登录的action逻辑中，Firebase认证成功后，没有调用fireApp.auth().currentUser.getIdToken()获取用户JWT，也没有将拿到的token手动执行localStorage.setItem('jwt', 对应token)写入，完全没有和路由守卫的检测逻辑对齐。
• 跳转目标的路由配置缺失
  Vuex登录逻辑中存在跳转到name: 'Welcome'的代码，但你的路由表中从未定义过这个名称的路由，这类跳转执行时会直接抛出导航错误，无法完成页面切换。
• Firebase认证初始化存在异步时序问题
  就算后续补全了token写入逻辑，Firebase的auth状态是异步从本地持久化加载的，刚进入应用时认证状态未初始化完成，也会误判用户未登录，出现反复跳登录页的问题。

对应修复方向 #

• 补全路由守卫的分支逻辑：在检测到jwt存在的分支里显式调用next()放行导航，补全完整的条件判断结构。
• 在登录成功流程中，获取Firebase生成的用户JWT后，手动将token写入localStorage的jwt键，和路由守卫的检测规则对齐。
• 修正不存在的路由跳转目标：要么在路由表中补充Welcome路由的定义，要么把跳转逻辑替换为已存在的合法路由名称。
• 监听fireApp.auth().onAuthStateChanged事件，在auth状态完全加载完成前暂停路由导航，避免初始加载阶段因为状态未同步被误判为未登录。
• 将firestore用户身份校验的Promise做异常捕获，避免因为未处理的Promise rejection打断后续的跳转逻辑。

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