Nuxt结合Firebase Auth登录后无法正确重定向至受限页面问题求助

看起来你遇到的问题是登录后立即跳转时，Vuex Store还没来得及更新用户状态，导致auth中间件认为用户未登录，从而重定向回/login页面，而之后能正常访问/profile是因为后续Firebase的auth状态监听已经更新了Store。

核心原因 #

你在signInWithEmailAndPassword的then回调里直接调用this.$router.push('profil')，但此时Vuex的authUser还没有被更新——通常我们会通过Firebase的onAuthStateChanged监听来同步用户状态到Store，而这个监听的触发是异步的，会晚于登录成功的回调。所以当中间件检查isLoggedIn时，state.authUser还是null，就触发了重定向。

解决方案 #

1. 确保Firebase Auth状态监听正确同步到Store

首先检查你的Firebase插件（通常是plugins/firebase.js）是否配置了onAuthStateChanged监听，用来同步用户状态到Vuex：

export default ({ app, store }) => {
  // 监听Firebase Auth状态变化
  app.$fire.auth.onAuthStateChanged((authUser) => {
    if (authUser) {
      // 用户已登录，更新Store
      store.commit('SET_AUTH_USER', { authUser })
    } else {
      // 用户登出，重置Store
      store.commit('RESET_STORE')
    }
  })
}

这个监听是保持Store和Firebase Auth状态一致的关键。

2. 登录成功后先手动更新Store再跳转

在你的登录方法里，登录成功后先手动调用SET_AUTH_USER mutation更新Store，再执行路由跳转，这样中间件检查时就能拿到最新的用户状态：

async login() {
  try {
    // 等待登录请求完成
    const { user } = await this.$fire.auth.signInWithEmailAndPassword(
      this.formPrijava.email, 
      this.formPrijava.geslo
    )
    
    // 先手动更新Vuex Store
    this.$store.commit('SET_AUTH_USER', { authUser: user })
    
    this.$modal.hideAll();
    alert(user.uid);
    // 使用绝对路径跳转更可靠
    this.$router.push('/profil'); 
  } catch (error) {
    const errorCode = error.code;
    const errorMessage = error.message;
    
    if (errorCode === 'auth/wrong-password') {
      alert('Wrong password.');
    } else {
      alert(errorMessage);
    }
    console.log(error);
  }
}

3. 优化isLoggedIn getter（可选但推荐）

你的getter里的try-catch可以简化，用可选链操作符更简洁安全：

export default {
  isLoggedIn: (state) => {
    // 检查authUser是否存在且有uid
    return !!state.authUser?.uid;
  }
}

验证逻辑 #

修改后，登录流程变成：

1. 登录请求成功拿到用户信息
2. 立即更新Vuex Store的authUser
3. 跳转至/profile页面
4. auth中间件检查isLoggedIn时，Store已经有了用户信息，允许访问

这样就能避免跳转时的重定向问题了。

内容的提问来源于stack exchange，提问作者Marko Kavaš