React向Firebase Functions部署的Express API发起认证请求遇阻

1. Axios拦截器无法通过React Context获取用户 #

拦截器初始化在React组件上下文之外，无法直接通过useContext获取用户状态。

解决方案：
利用Firebase Auth的全局实例动态获取有效Token，确保每次请求都拿到最新的未过期凭证：

// 创建Axios实例
const api = axios.create({ baseURL: '你的Firebase Functions API地址' });

// 请求拦截器
api.interceptors.request.use(async (config) => {
  const user = firebase.auth().currentUser;
  if (user) {
    const token = await user.getIdToken();
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

无需依赖React Context，直接通过Firebase Auth全局状态同步用户信息即可。

2. localStorage存储用户后调用getIdToken()报TypeError #

localStorage仅支持存储字符串，存入Firebase User实例再取出后会变成普通JS对象，丢失原有的实例方法（如getIdToken()）。

解决方案：

• 不要存储整个User对象，Firebase Auth默认会自动持久化登录状态（通过localStorage或indexedDB），直接调用全局实例获取用户：

// 登录成功后同步到React状态即可
firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    setUser(userCredential.user);
  });

// 请求时直接获取最新Token
const getToken = async () => {
  const user = firebase.auth().currentUser;
  if (!user) throw new Error('用户未登录');
  return await user.getIdToken();
};

3. 后端admin.auth().verifyIdToken报错401及元数据服务错误 #

该错误是因为Admin SDK无法正确获取Google Cloud项目凭证，分场景处理：

本地开发环境 #

• 从Firebase控制台（设置→服务账号→生成新私钥）下载服务账号密钥文件
• 设置环境变量指向密钥文件：

  # Windows
  set GOOGLE_APPLICATION_CREDENTIALS="C:\path\to\service-account-key.json"
  
  # macOS/Linux
  export GOOGLE_APPLICATION_CREDENTIALS="/path/to/service-account-key.json"
  

• 正确初始化Admin SDK：

const admin = require('firebase-admin');

if (process.env.NODE_ENV === 'development') {
  const serviceAccount = require('./service-account-key.json');
  admin.initializeApp({
    credential: admin.credential.cert(serviceAccount)
  });
} else {
  admin.initializeApp();
}

部署到Firebase Functions环境 #

• 确保Admin SDK只在函数外部初始化一次：

// 函数文件顶部初始化
const admin = require('firebase-admin');
admin.initializeApp();

// 定义API路由
exports.api = functions.https.onRequest(app);

• 检查Token传递格式，前端需传Bearer ${token}，后端验证时要移除前缀：

// 后端Token验证中间件
const verifyToken = async (req, res, next) => {
  const authHeader = req.headers.authorization;
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).send('未提供有效Token');
  }
  const token = authHeader.split(' ')[1];
  try {
    const decodedToken = await admin.auth().verifyIdToken(token);
    req.user = decodedToken;
    next();
  } catch (error) {
    res.status(401).send('Token验证失败');
  }
};

内容的提问来源于stack exchange，提问作者Cătălin Andrei Preda