Nuxt首次加载时$fire.auth.onAuthStateChanged无法识别登录用户如何解决

• Firebase Auth 初始化属于异步操作，首次加载应用时，中间件执行时机早于 Auth 完成从本地持久化存储读取登录状态的流程。你直接监听 onAuthStateChanged 时，首次回调会先返回 null，等 Auth 初始化完成后才会第二次返回真实的用户对象，但此时你的中间件已经执行完毕，不会再处理后续回调结果，因此首次加载会误判为未登录。
• 当前编写的中间件没有返回 Promise，Nuxt 不会等待异步回调执行完成就会结束中间件流程，导致逻辑失效。
• 额外问题：代码 else 分支的路由判断逻辑存在错误，|| 逻辑会导致无论路径是登录还是注册页，条件永远成立，会出现无限重定向问题，需要替换为 &&。

将 onAuthStateChanged 包装为 Promise，等待首次状态变更触发、Auth 初始化完成后再执行路由判断逻辑，修复后的中间件代码如下：

export default function ({app, route, redirect}) {
  console.log('middleware')
  // 包装为Promise，让Nuxt等待异步逻辑执行完成
  return new Promise((resolve) => {
    const unsubscribe = app.$fire.auth.onAuthStateChanged(user => {
      if (user) {
        console.log('user+')
        if (route.path === perm.signin || route.path === perm.signup) {
          return redirect('/')
        }
      } else {
        console.log('user-')
        // 这里将||改为&&，保证逻辑正确
        if (route.path !== perm.signin && route.path !== perm.signup) {
          return redirect(perm.signin)
        }
      }
      // 取消监听避免内存泄漏
      unsubscribe()
      resolve()
    })
  })
}

如果你使用的是Nuxt 2版本，还可以在nuxt.config.js的fire模块配置中开启auth.initializeOnClient参数，确保客户端Auth初始化完成后再执行路由逻辑，进一步降低异常出现的概率。

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