如何用@react-oauth/google处理Google登录/登出及token续期问题

现有登录实现代码 #

const login = useGoogleLogin({
    onSuccess: (tokenResponse) => {
      console.log("token response", tokenResponse);
      setToken(tokenResponse.access_token);
    },
    scope: "https://www.googleapis.com/auth/books",
  });

问题1：access token仅1小时有效，用户持续登录是否需要每小时请求新token？ #

不需要让用户手动重新登录，正确做法是利用refresh token自动刷新access token，流程如下：

• 首次用户授权时，tokenResponse中会包含refresh_token（需确保你的OAuth应用配置正确，且首次授权时设置prompt: 'consent'参数，强制获取refresh token）。
• 将refresh_token和access_token一起存储至localStorage或应用状态管理工具中。
• 当access token过期时，调用Google的token刷新接口，用refresh_token换取新的access token，全程无需用户操作：

  const refreshAccessToken = async (refreshToken) => {
    const response = await fetch('https://oauth2.googleapis.com/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: new URLSearchParams({
        client_id: '你的客户端ID',
        client_secret: '你的客户端密钥',
        refresh_token: refreshToken,
        grant_type: 'refresh_token'
      })
    });
    const data = await response.json();
    // 更新本地存储的access token
    setToken(data.access_token);
    return data.access_token;
  };
  

• 可以在发起Google Books API请求前检查token过期时间，或者捕获API返回的401错误后触发刷新逻辑。

问题2：@react-oauth/google的googleLogout()函数具体作用是什么？调用后token仍活跃？ #

• googleLogout()的核心作用是清除当前应用与Google OAuth的本地会话关联，比如移除浏览器中针对你的应用的登录状态标记。
• 它不会直接使已颁发的access token失效——access token的有效性由Google服务器管控，直到过期时间结束，所以调用后未过期的token仍然可以正常调用API。
• 如果需要立即让token失效，需调用Google的token撤销接口：

  const revokeToken = async (accessToken) => {
    await fetch(`https://oauth2.googleapis.com/revoke?token=${accessToken}`, {
      method: 'POST'
    });
  };
  

  调用此接口后，对应的access token和refresh token会立即失效，无法再用来获取新的token。

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