useEffect hook中调用onAuthStateChanged出现刷新登录态异常的问题

现有代码的核心问题 #

• 初始加载状态设置错误：应用启动时loading值为false，但Firebase需要一定时间从本地存储恢复登录会话，这段时间onAuthStateChanged会先返回空值，组件会直接把这个临时空值当成“用户已登出”渲染，导致闪登出态
• 状态更新时序错误：检测到登录用户后，没有等用户数据库资料拉取完成就提前把loading设为false，容易出现状态不同步
• 路由跳转逻辑放错位置：把跳个人资料页的逻辑写在全局鉴权监听里，这个监听会在页面刷新、登录态恢复时重复触发，不管用户当前在哪个页面，只要拿到user就强制重定向，自然会出现刷新其他页面被踢走的问题
• 空态分支缺少状态收尾：鉴权返回null的时候，没有把loading设为false，容易卡在加载态或者误判登出

修正后的实现逻辑 #

1. 调整状态初始值
   • 把loading的初始值改为true，从应用启动开始就进入“等待鉴权结果”的状态，鉴权流程完成前不渲染受鉴权控制的页面内容，从根源上避免闪登出态
   • 把currentUser、currentUserData的初始值从空字符串改为null，减少不必要的类型判断异常
2. 重构鉴权监听的执行流程
   • 把拉取用户资料的逻辑改成同步等待，等数据拉取完成再更新对应状态
   • 把关闭loading的逻辑放在finally块里，不管是登录、未登录还是异常分支，只要鉴权流程走完就关闭加载态
   • 把全局监听器里的硬跳转逻辑删掉：跳转个人资料页的动作，单独放在登录提交成功的回调里执行，全局监听只负责同步登录状态，不强制修改路由，保证刷新页面时保留用户当前所在的位置
3. 路由守卫补充判断
   • 访问受保护的页面时，如果loading为true，优先展示加载占位组件，不要直接渲染页面内容
   • 等loading为false且确认用户未登录时，再跳转到登录页

修正后的参考代码 #

// 初始化状态调整
const [currentUser, setCurrentUser] = useState(null)
const [currentUserData, setCurrentUserData] = useState(null)
// 初始值设为true，等待鉴权完成
const [loading, setLoading] = useState(true)

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged(async user => {
    try {
      if (user) {
        setCurrentUser(user)
        // 同步等待拉取对应用户的资料
        const userDocRef = db.collection('users').doc(user.uid)
        const userDoc = await userDocRef.get()
        setCurrentUserData(userDoc.data())
      } else {
        // 未登录态清空用户状态
        setCurrentUser(null)
        setCurrentUserData(null)
      }
    } catch (error) {
      console.error('鉴权流程执行异常', error)
    } finally {
      // 鉴权全流程走完再关闭加载状态
      setLoading(false)
    }
  })
  // 组件卸载时取消监听
  return unsubscribe
  // 鉴权监听只需要在挂载时初始化一次，不需要额外依赖
}, [])

// 登录成功后的跳转逻辑单独写在登录表单提交的回调中，比如：
// const handleLoginSubmit = async (credential) => {
//   await auth.signInWithCredential(credential)
//   // 登录成功再跳转个人资料页
//   history.push('/profile')
// }

额外注意点 #

• 之前依赖数组里引入history是不必要的，删掉全局跳转逻辑后，鉴权监听只需要在组件挂载时初始化一次，重复触发反而会增加不必要的网络请求和状态更新
• 受保护路由的判断逻辑不要依赖currentUser的空字符串初始值，统一用null作为“无用户”的判断标准，避免类型判断错位

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