使用Firebase Auth JavaScript SDK时ID token无法自动刷新如何解决

问题核心原因 #

你遇到的问题主要来自两处配置错误：

1. onIdTokenChanged 监听没有绑定你初始化的auth实例，导致SDK触发token刷新后你收不到回调
2. 依赖localStorage存储静态token，且不必要的forceRefresh=true会干扰SDK默认的自动刷新逻辑

修复步骤 #

• 修正onIdTokenChanged监听参数
  Firebase Auth的所有事件监听方法都需要将初始化得到的auth实例作为第一个入参，你代码里onAuthStateChanged正确传了auth，但onIdTokenChanged没有传，所以这个监听实际是无效的。修正后的代码如下：

firebase.auth().onIdTokenChanged(auth, (user) => {
  if (user) {
    // 不需要传forceRefresh=true，SDK默认会返回有效token
    user.getIdToken().then(function(idToken) {
      localStorage.setItem("auth.token", idToken)
    })
  }
})

• 优化token获取逻辑（更推荐的方案）
  不要再直接读取localStorage里缓存的token，每次向后端发请求前实时调用user.getIdToken()获取最新token即可，这个方法内部已经实现了自动校验token有效期、过期自动刷新的逻辑，比你自己维护本地存储靠谱很多。示例请求封装：

async function sendAuthRequest(url, options = {}) {
  const currentUser = auth.currentUser
  if (!currentUser) {
    // 处理未登录逻辑
    throw new Error("用户未登录")
  }
  // 自动刷新逻辑由SDK内部处理，无需额外操作
  const idToken = await currentUser.getIdToken()
  return fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      "Authorization": `Bearer ${idToken}`
    }
  })
}

• 加401兜底容错
  如果还是偶发token过期返回401，可以在请求拦截逻辑里增加容错：收到后端401响应时，主动调用user.getIdToken(true)强制刷新token，更新后重发当前请求即可。

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