react-google-login已弃用，React应用谷歌登出替代方案咨询

因为react-google-login已被弃用，结合你正在使用的@react-oauth/google，以下是几种可行的登出实现方案：

方案1：直接调用Google Identity Services原生API #

@react-oauth/google底层依赖Google Identity Services (GIS)，可以直接调用GIS的方法完成登出，无需额外依赖：

import { google } from '@react-oauth/google';

const handleLogout = () => {
  // 禁用谷歌自动登录选择（清除当前域名的自动登录状态）
  google.accounts.id.disableAutoSelect();
  // 清除本地存储的用户凭证、个人信息等自定义数据
  localStorage.removeItem('google-access-token');
  localStorage.removeItem('google-user-profile');
  // 跳转到登录页或刷新页面重置状态
  window.location.href = '/login';
};

这个方案轻量且贴合@react-oauth/google的技术栈，能覆盖大部分场景的登出需求。

方案2：使用gapi.auth2完成完整登出 #

如果你的项目已加载gapi.auth2库，可以调用其官方登出方法，实现谷歌账号的全局会话清除：

import { useEffect } from 'react';

const handleLogout = async () => {
  const authInstance = window.gapi.auth2.getAuthInstance();
  // 调用谷歌官方登出接口
  await authInstance.signOut();
  // 清除本地所有相关存储数据
  localStorage.clear();
  // 刷新页面重置应用状态
  window.location.reload();
};

// 确保gapi.auth2初始化完成
useEffect(() => {
  if (window.gapi) {
    window.gapi.load('auth2', () => {
      window.gapi.auth2.init({
        client_id: '你的Google Client ID'
      });
    });
  }
}, []);

该方案会完全终止谷歌账号在当前浏览器的会话，适合需要彻底登出谷歌账号的场景。

方案3：结合useGoogleLogin钩子管理状态 #

如果你使用@react-oauth/google提供的useGoogleLogin钩子，可以在登出时同步重置应用内的用户状态：

import { useGoogleLogin } from '@react-oauth/google';
import { useState } from 'react';

const AuthComponent = () => {
  const [user, setUser] = useState(null);
  const login = useGoogleLogin({
    onSuccess: (tokenResponse) => {
      // 获取并存储用户信息
      fetch(`https://www.googleapis.com/oauth2/v3/userinfo?access_token=${tokenResponse.access_token}`)
        .then(res => res.json())
        .then(data => setUser(data));
    },
  });

  const handleLogout = () => {
    google.accounts.id.disableAutoSelect();
    // 重置应用内用户状态
    setUser(null);
    // 清除本地存储的凭证
    localStorage.removeItem('google-access-token');
  };

  return (
    <div>
      {!user ? (
        <button onClick={login}>登录谷歌账号</button>
      ) : (
        <>
          <p>欢迎，{user.name}</p>
          <button onClick={handleLogout}>登出</button>
        </>
      )}
    </div>
  );
};

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