Firebase获取idToken最佳实践：解决auth/quota-exceeded配额超限问题

我用React.js开发仪表盘网站，用户可以在里面分析各类图表。从Node.js服务器获取图表数据时，需要用户ID Token做服务端验证（仅向授权用户返回数据）。

按照Firebase官方文档，获取当前idToken的代码如下：

firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {
  // Send token to your backend via HTTPS
  // ...
}).catch(function(error) {
  // Handle error
});

但用户频繁切换图表或多次刷新页面时，会触发Firebase: Error (auth/quota-exceeded)错误。

如果不设置forceRefresh: true，错误会消失，但可能出现idToken过期的情况。想请教几个问题：

• 是否需要每次API调用时都强制刷新idToken？
• 若不需要，该如何、在何处、何时检查token是否已过期？
• 处理该问题的最佳实践是什么？

1. 不需要每次API调用都强制刷新idToken #

强制刷新会频繁触发Firebase Auth的token刷新接口，很容易触发配额限制，这就是你遇到auth/quota-exceeded错误的核心原因。Firebase默认会在本地缓存idToken，有效期为1小时，只要token没过期，直接使用缓存的版本就足够安全。

2. 检查token过期的具体实现 #

• 检查方法：解析idToken的payload部分，其中exp字段是token的过期时间戳（秒级），将其转换为毫秒后和当前时间对比即可判断是否过期。
  示例代码（React项目中）：

  function isTokenExpired(idToken) {
    if (!idToken) return true;
    // 解析token的payload部分
    const payload = JSON.parse(atob(idToken.split('.')[1]));
    // 转换为毫秒级时间戳
    const expirationTime = payload.exp * 1000;
    // 对比当前时间
    return Date.now() >= expirationTime;
  }
  

• 检查时机：
  • 每次发起API请求前，先校验缓存token的有效性；
  • 监听Firebase Auth的onAuthStateChanged事件，用户登录状态变更时更新缓存的token；
  • 当API请求返回401（未授权）状态码时，触发token刷新逻辑后重试请求。
• 检查位置：
  • 封装一个全局的API请求工具函数，在函数内部统一处理token的检查和刷新逻辑；
  • 借助React Context或状态管理工具（比如Zustand、Redux）存储当前idToken，方便全局访问和更新。

3. 最佳实践流程 #

1. 缓存token到全局状态：用户登录后，调用getIdToken(false)获取token（不强制刷新），将其存储到全局状态或localStorage中；
2. 统一拦截API请求：
   • 请求发起前，先检查缓存token是否过期：
     • 未过期：直接携带缓存token发起请求；
     • 已过期：调用getIdToken(false)获取新token，更新缓存后再发起请求；
3. 处理请求失败场景：如果API返回401错误，先尝试刷新token，刷新成功则重试请求；若刷新失败（比如token被撤销、用户账号异常），直接跳转至登录页面让用户重新登录；
4. 监听Auth状态变化：通过firebase.auth().onAuthStateChanged(user => { ... })监听用户登录/登出动作，登录时自动获取并缓存token，登出时清空缓存的token；
5. 杜绝无意义刷新：仅在token过期或请求返回401时才触发刷新逻辑，切勿每次请求都强制刷新。

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