在 Firebase 上重新渲染 Header 登錄

Question

我在使用 Firebase 登錄后更新 header 時遇到問題...當我刷新瀏覽器時，它又回到好像我沒有登錄，直到我被重定向。 當刷新后檢測到用戶已登錄時，我想重新呈現我的 header。

這是我目前改變header的方法。

<li>
  {!auth.currentUser && (<Link to="/signup/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>Sign Up</Link>)}
  {auth.currentUser && (<Link to="/accounts/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>{auth.currentUser.displayName}</Link>)}
</li>

Answer 1

我最終找到了答案，並認為將其發布在這里會有所幫助。

首先，我確定一個 State 用於登錄。

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

然后我使用以下方法設置 State：

  useEffect(() => {
    const auth = getAuth();
    onAuthStateChanged(auth, (user) => {
      setIsLoggedIn(!!user);
    });
  }, []);

然后我測量了isLoggedIn使用的值

{!isLoggedIn && (<Link to="/signup/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>Sign Up</Link>)}
{isLoggedIn && (<Link to="/accounts/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>Account</Link>)}