React项目中Firebase getIdToken最优调用方式及token管理问询

Firebase ID Token 管理方案 #

首先明确一个核心特性：user.getIdToken()本身自带自动刷新逻辑，只要用户身份有效，调用这个方法时如果当前token未过期就直接返回缓存的有效token，如果已过期或者即将过期，会自动向Firebase请求新的token，不需要你手动做过期判断。

你不需要的操作 #

• 不用每次组件更新都调用：属于完全冗余的操作，还会造成不必要的性能消耗
• 不用只在组件首次渲染时调用：首次渲染拿到的token1小时后就会过期，完全满足不了你长时间闲置不失效的需求

推荐两种实现方案，可根据项目复杂度二选一 #

方案1：在API请求拦截器里统一调用（最适配你的需求）

所有发往后端的请求统一走axios/fetch的拦截器处理，每次发请求前调用user.getIdToken()拿到最新token，再塞入请求头即可。
示例代码（以axios拦截器为例）：

import axios from 'axios'
import firebase from '你的firebase初始化文件路径'

axios.interceptors.request.use(async (config) => {
  const user = firebase.auth().currentUser
  if (user) {
    const token = await user.getIdToken()
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

这种方式不管用户闲置多久，只要发请求就会自动拿到有效的token，完全不用你处理刷新逻辑，也不需要额外把token存在cookie里，避免了存储层同步不及时的问题。

方案2：监听token刷新事件主动更新存储

如果你确实需要把token存在cookie或者全局状态里，可以监听Firebase的idTokenChanged事件，token刷新时自动更新存储：

firebase.auth().onIdTokenChanged(async user => {
  if (user) {
    const token = await user.getIdToken()
    Cookies.set('my_token', token, { domain: domain })
  } else {
    Cookies.remove('my_token', { domain: domain })
  }
})

这个事件会在用户登录、登出、token自动刷新时自动触发，不需要你手动轮询，只要用户不主动登出、身份有效，token就会自动更新到存储里。

注意事项 #

• 不要自己写定时器轮询刷新token：Firebase SDK内部已经处理了自动刷新逻辑，手动写定时器反而可能和SDK内部逻辑冲突
• 如果你用了React Context或者Redux存储用户状态，记得在onIdTokenChanged触发时同步更新全局状态，避免组件拿到旧的token

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