如何判断Firebase用户登录状态？避免显示未知认证状态

核心方案：新增加载状态变量区分两种模糊场景 #

Firebase的onAuthStateChanged触发前的空白期，本质是缺少一个「验证中」的状态标识，解决思路很直接：

• 初始化时设置一个isLoadingAuth变量为true，表示当前正在校验登录状态；
• 一旦onAuthStateChanged触发（不管返回用户对象还是null），立刻把isLoadingAuth设为false。

通过这个变量就能清晰区分三种状态：

• isLoadingAuth = true：显示加载提示（比如 spinner、"正在验证登录状态..." 文案），不要直接跳登录页；
• isLoadingAuth = false且user存在：展示已登录用户的内容；
• isLoadingAuth = false且user为null：才显示登录页面。

结合Redux的示例代码 #

// Redux初始状态
const initialAuthState = {
  user: null,
  isLoadingAuth: true
};

// 组件内的监听逻辑
useEffect(() => {
  const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
    // 更新用户状态
    dispatch({ type: 'SET_USER', payload: user });
    // 标记验证完成
    dispatch({ type: 'SET_LOADING_AUTH', payload: false });
  });
  
  // 组件卸载时取消监听
  return unsubscribe;
}, [dispatch]);

额外优化技巧 #

• 可以先同步读取firebase.auth().currentUser，如果这个值不为null，能提前设置用户状态，但不能完全依赖它——因为Auth初始化完成前，这个值可能是null，最终仍要以onAuthStateChanged的回调结果为准；
• 加载状态下用骨架屏或轻量加载动画替代空白/登录页，避免用户产生「我明明登录过怎么又要重新登录」的困惑。

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