React谷歌OAuth登录：页面刷新时isSignedIn返回false，控制台执行相同代码返回true的问题求助

这个问题的核心原因很明确：你的React组件在初始化时，Google的gapi auth2库还没完成加载和初始化。

当页面刷新时，组件的useState会立即执行isSignedIn()作为初始值，这时候window.gapi.auth2.getAuthInstance()可能还不存在或者还没完成初始化，所以返回false。而等页面完全加载完成后，你在控制台执行相同代码时，gapi已经准备就绪，自然能正确返回登录状态。

下面是具体的修复方案：

方案1：使用useEffect等待gapi初始化并监听登录状态变化 #

修改你的Component.jsx代码，把状态初始化和gapi的检查逻辑放到useEffect中，同时监听gapi的登录状态变化：

import React, { useState, useEffect } from "react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    // 定义检查登录状态的函数
    const checkSignInStatus = () => {
      if (window.gapi && window.gapi.auth2) {
        const authInstance = window.gapi.auth2.getAuthInstance();
        if (authInstance) {
          const signedIn = authInstance.isSignedIn.get();
          setIsLoggedIn(signedIn);
        }
      }
    };

    // 首先检查一次当前状态
    checkSignInStatus();

    // 如果gapi已经加载，监听登录状态变化
    if (window.gapi && window.gapi.auth2) {
      const authInstance = window.gapi.auth2.getAuthInstance();
      authInstance.isSignedIn.listen(setIsLoggedIn);
    } else {
      // 如果gapi还没加载，等待加载完成后再初始化（假设你是通过script标签引入gapi）
      const interval = setInterval(() => {
        if (window.gapi && window.gapi.auth2) {
          checkSignInStatus();
          window.gapi.auth2.getAuthInstance().isSignedIn.listen(setIsLoggedIn);
          clearInterval(interval);
        }
      }, 100);
    }

    // 清理函数，移除监听
    return () => {
      if (window.gapi && window.gapi.auth2) {
        const authInstance = window.gapi.auth2.getAuthInstance();
        authInstance.isSignedIn.listen(null);
      }
    };
  }, []);

  console.log("isLoggedIn ", isLoggedIn);
  return (
    isLoggedIn ? <div> User is logged in </div> : <div> User is NOT logged in </div>
  );
}

export default App;

方案2：确保gapi在组件渲染前完成初始化 #

如果你是通过script标签引入gapi，可以在gapi加载完成并初始化auth2之后再渲染React组件。比如在你的index.html中：

<script src="https://apis.google.com/js/api:client.js"></script>
<script>
  window.gapi.load('auth2', function() {
    window.gapi.auth2.init({
      client_id: 'YOUR_CLIENT_ID'
    }).then(() => {
      // 当auth2初始化完成后，再渲染React应用
      ReactDOM.render(<App />, document.getElementById('root'));
    });
  });
</script>

这样修改后，组件渲染时gapi已经完全初始化，你可以安全地在useState中调用isSignedIn()，或者直接在组件中获取状态。

关键要点总结 #

• 永远不要假设第三方库（比如gapi）在React组件初始化时已经完全加载完成，尤其是页面刷新的场景。
• 使用useEffect来处理异步加载的依赖逻辑，或者确保第三方库在组件渲染前完成初始化。
• 利用gapi提供的isSignedIn.listen()方法，可以实时监听登录状态的变化，保证组件状态和实际登录状态同步。

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