React应用Firebase Authentication页面重载时AccessToken获取异常求助

页面重载时Firebase Auth需要从本地缓存恢复用户会话，这个过程是异步的，直接访问auth.currentUser大概率会拿到null，导致API请求提前执行且没有有效Token。解决核心是等用户认证状态稳定后再获取Token并发起请求，用Firebase提供的onAuthStateChanged监听是最可靠的方式。

封装复用的自定义Hook #

先写一个全局可用的自定义Hook，统一处理Token的获取和状态管理：

import { useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged, getIdToken } from 'firebase/auth';

const useAuthToken = () => {
  const [token, setToken] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const auth = getAuth();
    // 监听用户认证状态变化
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
      if (user) {
        // 强制刷新并获取最新Token
        const idToken = await getIdToken(user, true);
        setToken(idToken);
      } else {
        setToken(null);
      }
      setLoading(false);
    });

    // 组件卸载时取消监听，避免内存泄漏
    return unsubscribe;
  }, []);

  return { token, loading };
};

export default useAuthToken;

在首页组件中使用 #

在需要发起API请求的页面，通过Hook获取Token和加载状态，确保时机正确：

import { useEffect } from 'react';
import useAuthToken from './useAuthToken';

const HomePage = () => {
  const { token, loading } = useAuthToken();

  useEffect(() => {
    // 只有当加载完成且Token存在时，才发起请求
    if (!loading && token) {
      const fetchUserDetails = async () => {
        try {
          const res = await fetch('/api/user-details', {
            method: 'GET',
            headers: {
              'Authorization': `Bearer ${token}`
            }
          });
          const userData = await res.json();
          // 处理返回的用户数据
          console.log('用户详情:', userData);
        } catch (err) {
          console.error('获取用户详情失败:', err);
        }
      };

      fetchUserDetails();
    }
  }, [token, loading]);

  // 加载中状态提示
  if (loading) {
    return <div>加载中...</div>;
  }

  // 未登录状态处理
  if (!token) {
    return <div>请先登录</div>;
  }

  return (
    <div className="home-page">
      {/* 首页内容渲染 */}
    </div>
  );
};

export default HomePage;

关键说明 #

• onAuthStateChanged会自动处理页面重载时的会话恢复，无论用户是否登录，都会在状态稳定后触发回调
• 传入getIdToken(user, true)的第二个参数true，会强制Firebase刷新Token，避免使用过期的缓存Token
• 通过loading状态可以避免在会话恢复完成前发起无效请求，同时给用户提供加载反馈
• 这个Hook可以在任何需要Token的页面复用，保证所有页面重载时都能正确获取Token

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