如何跟踪其他组件中firebase登录状态的变化

Question

嗨，我正在尝试编写一个导航栏组件。

导航栏中有两个地方供用户登录。在CCD_ 1组件本身&另一个名为CCD_ 2的组件也处理登录。设置菜单是整个项目中使用的可重复使用的组件，因此我们在中添加了一个登录按钮

我面临的问题是当用户从设置菜单登录时。我想更新导航栏的状态。

最初，当应用程序中没有用户时，Navbar会获得LOGIN按钮。我想要的是，当用户通过设置菜单登录时，我想重新设置导航栏&将LOGIN按钮更改为LOGOUT按钮，但这并没有发生。

这是导航条组件

<Button
onClick={(event: React.MouseEvent<HTMLElement>) =>
setDisplayDialog(true)
}
className={classes.loginButton}
>
{firebase.auth().currentUser ? <p>Logout</p> : <p>Login</p>}
</Button>

由于我使用firebase谷歌登录方法，我正在测试用户是否可以使用此语法

firebase.auth().currentUser

这是设置菜单组件代码

const signInWithGoogle = async (event: React.MouseEvent): Promise<void> => {
const creds = await firebase
.auth()
.signInWithPopup(AuthenticationProviders.google);
await firebase.auth().updateCurrentUser(creds.user);
hideDialogBox(event);
};
<GoogleButton
className={authStyle.GoogleButtonPlacement}
onClick={(event: React.MouseEvent) => {
signInWithGoogle(event);
}}
/>

那么，我如何跟踪设置菜单中的状态变化呢？

Answer 1

您应该注册一个auth状态观测器，而不是使用currentUser来跟踪状态更改，如文档所示：

firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
} else {
// User is signed out.
}
});

这为您提供了一个回调，使您能够响应用户登录状态随时间的变化。您可以使用此回调调用setState()来更改用户登录或注销时需要更新的任何组件。