Re-render Header 在 Firebase 登录

Question

我在使用 Firebase 登录后更新 header 时遇到问题... 当我刷新我的浏览器时，它会回到我没有登录的状态，直到我被重定向。当刷新后检测到用户登录时，我想 re-render 我的 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

我最终找到了答案，并认为 post 在这里会有所帮助。

首先我定义了一个登录状态。

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

然后我使用以下方法设置状态：

  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>)}

Re-render Header 在 Firebase 登录

Re-render Header on Firebase Login

javascript

reactjs

firebase-authentication

rerender