Firebase onIdTokenChanged未返回刷新token及正确使用方法咨询

疑问1：是否只需在登录完成后调用一次onIdTokenChanged即可？ #

• 是，onIdTokenChanged是 Firebase 提供的全局监听器，仅需注册一次就会持续生效，触发场景包括用户登录/登出、id token 自动刷新、用户权限变更等所有身份状态变动的场景。
• 注意不要重复注册该监听器，你当前把注册逻辑放在登录点击方法内，每次用户点击登录都会新增一个监听器，后续token刷新时会多次触发回调，导致重复更新cookie、重复触发dispatch的问题。

疑问2：是否需要在每次发起API请求前都调用该方法，将token传给后端做校验？ #

• 不需要，onIdTokenChanged是监听器不是token获取方法，每次请求前你只需直接调用user.getIdToken()即可：这个方法内部会自动判断当前token是否过期，过期的话会自动触发刷新逻辑返回新的token，不需要你手动处理过期判断。
• 不建议直接使用你存在Cookie或者store里的token发起请求，有可能你取到的是刚好过期还没来得及被监听器更新的旧token。

现有代码优化&补充操作 #

你只需要做以下调整即可实现自动持续获取刷新后的token，不需要额外的Firebase配置，Firebase内部默认已经实现了id token自动刷新逻辑：

1. 把onIdTokenChanged的注册逻辑从登录方法中移到全局根组件（比如App.jsx）的useEffect钩子中，全局仅注册一次，同时增加销毁逻辑避免内存泄漏：

// App.jsx 全局根组件内
useEffect(() => {
  // 注册监听器，返回取消监听的方法
  const unsubscribe = firebase.auth().onIdTokenChanged(async user => {
    if (user) {
      const token = await user.getIdToken()
      // 修正原代码Cookie配置多对象传参的错误，合并为单个配置对象
      Cookies.set('token', token, { domain: domain, sameSite: 'strict', secure: true })
      await dispatch({
        type: 'LOGIN',
        payload: {
          token,
          user: {
            email: user.email,
            // 注意：原代码的data.userLogin.firstName不要用闭包的旧数据，建议从user的custom claims或者单独的用户信息接口获取，避免刷新token时拿到旧数据
            name: user.displayName,
            uuid: user.uid
          }
        }
      })
      dispatch({ type: SET_IS_LOADING, payload: false })
    } else {
      dispatch({ type: 'LOGOUT' })
      dispatch({ type: SET_IS_LOADING, payload: false })
    }
  })
  // 组件卸载时取消监听，避免内存泄漏
  return () => unsubscribe()
}, [dispatch])

2. 简化登录方法，仅保留登录触发逻辑即可：

const signInWithEmailAndPassword = async () => {
  dispatch({ type: SET_IS_LOADING, payload: true })
  try {
    dispatch({ type: 'LOADING' })
    await firebase.auth().signInWithEmailAndPassword(email, password)
  } catch (error) {
    console.log(error)
    dispatch({ type: SET_IS_LOADING, payload: false })
  }
}

3. 所有API请求发送前统一调用getIdToken()获取最新token，示例通用请求封装如下：

const request = async (url, options = {}) => {
  const user = firebase.auth().currentUser
  if (user) {
    // 方法内部自动判断token是否过期，过期会自动刷新后返回最新token
    const token = await user.getIdToken()
    options.headers = {
      ...options.headers,
      Authorization: `Bearer ${token}`
    }
  }
  return fetch(url, options)
}

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