如何在Axios拦截器中获取Firebase 9的ID Token并解决初始用户为空问题

问题根源 #

Firebase Auth的用户状态初始化是异步的，页面加载初期currentUser会为null，直接调用currentUser.getIdToken()会触发TypeError导致请求崩溃。Firebase 9和8的核心逻辑一致，只是API导入方式不同，之前的Firebase 8代码可能只是未触发异步加载的边界场景。

解决方案1：等待用户状态加载完成 #

封装一个异步函数，确保获取到用户实例后再继续请求流程：

import axios from "axios";
import config from "../config";
import { getAuth, onAuthStateChanged } from "firebase/auth";

const API = axios.create({
  responseType: "json",
  baseURL: config.ApiUrl
});

// 封装等待用户加载完成的工具函数
const waitForAuthUser = () => {
  return new Promise((resolve) => {
    const auth = getAuth();
    // 用户已加载完成，直接返回
    if (auth.currentUser) {
      resolve(auth.currentUser);
    } else {
      // 监听用户状态变化，获取到用户后结束监听并返回
      const unsubscribe = onAuthStateChanged(auth, (user) => {
        resolve(user);
        unsubscribe();
      });
    }
  });
};

API.interceptors.request.use(async (request) => {
  const currentUser = await waitForAuthUser();

  if (currentUser) {
    const idToken = await currentUser.getIdToken();
    // 合并原有headers，避免覆盖默认配置
    request.headers = {
      ...request.headers,
      Authorization: `Bearer ${idToken}`
    };
  }

  // 未登录时返回原请求，可根据业务需求调整（比如抛出错误、跳转登录页）
  return request;
});

解决方案2：直接处理null边界情况 #

如果不需要强制等待用户登录，仅在用户存在时添加Token：

import axios from "axios";
import config from "../config";
import { getAuth } from "firebase/auth";

const API = axios.create({
  responseType: "json",
  baseURL: config.ApiUrl
});

API.interceptors.request.use(async (request) => {
  const auth = getAuth();
  const currentUser = auth.currentUser;

  if (currentUser) {
    // getIdToken会自动刷新过期的Token，无需手动处理刷新逻辑
    const idToken = await currentUser.getIdToken();
    request.headers.Authorization = `Bearer ${idToken}`;
  }

  return request;
});

注意事项 #

• 不要直接覆盖request.headers，使用扩展运算符合并原有配置，避免丢失默认请求头。
• getIdToken()方法会自动检查Token是否过期，若过期会自动刷新并返回新Token，无需额外处理刷新逻辑。
• 若业务要求必须登录才能发起请求，可在currentUser为null时抛出错误或跳转登录页，终止请求流程。

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