React项目中使用Firebase时如何获取并刷新refreshToken？

核心问题定位 #

你当前的实现错误点是手动将单次获取的静态accessToken和过期时间存入localStorage，跳过了Firebase Auth SDK内置的自动令牌刷新机制，才会出现令牌过期后需要手动重登的问题。Firebase本身已经封装了完整的refreshToken调用、令牌刷新逻辑，不需要你手动管理底层刷新流程。

正确的令牌使用方式 #

不要手动存储、校验accessToken，每次需要携带令牌请求后端接口时，调用user.getIdToken()方法即可：

• 若当前令牌有效：直接返回本地缓存的令牌
• 若当前令牌已过期：SDK会自动调用接口用内置存储的refreshToken换取最新的有效令牌再返回
  全程不需要你手动处理刷新逻辑、校验过期时间。
  示例代码：

// 每次请求前调用该方法获取有效令牌即可
const getValidToken = async () => {
  const currentUser = auth.currentUser;
  if (!currentUser) throw new Error("用户未登录");
  return await currentUser.getIdToken();
}

刷新时机问题解答 #

既不需要你定时校验主动刷新，也不需要页面刷新时手动刷新，两种方案都属于冗余实现。只要你所有用到令牌的场景都通过getIdToken()获取最新值，SDK会自动处理所有刷新场景，永远不会返回过期令牌。

现有代码修改建议 #

你可以直接删掉本地存储exp、tocaToken的逻辑，只保留业务需要的userID存储即可，令牌的生命周期完全交给Firebase SDK管理：

import React from 'react'
import { useHistory } from "react-router";
import auth from "../utils/Auth";

export const useSocialAuth = () => {
    const history = useHistory();
    const providerFunc = (socialProvider:any) => {
        const provider = socialProvider();
        provider
          .then((result: any) => {
            console.log(result)
            auth.login(() => {
              localStorage.setItem("userID", result.user.uid);
              history.push("/");
            });
          })
          .catch((err:any) => console.log(err));
    }
    return providerFunc;
};

可选扩展：监听令牌刷新事件 #

如果你的业务需要同步最新令牌到自有后端，可以监听onIdTokenChanged事件，令牌刷新时自动触发回调：

import { onIdTokenChanged } from "firebase/auth";

onIdTokenChanged(auth, async (user) => {
  if (user) {
    const freshToken = await user.getIdToken();
    // 此处执行你的业务逻辑，比如同步令牌到自有后端
  } else {
    // 用户登出后的清理逻辑
  }
});

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