Context：我有一个<Header />组件，它有一个按钮，可以将用户重定向到<SignIn />组件。<Header />组件始终显示，但当用户登录时，"登录"按钮将消失，并替换为用户名。
我不会详细介绍身份验证机制，但假设它基于存储在localStorage中的JWT。我在<Header />中有以下代码，以便读取cookie并确定是否显示登录按钮：
componentDidMount() {
const token = localStorage.getItem("token");
if (token) {
this.props.fetchUser();
}
}
...
然而，这只适用于浏览器刷新或使用本机JS window.reload((。如果我使用react路由器重定向，<Header />组件中的登录按钮不会刷新，仍然显示(尽管设置了cookie(。
我想知道最好的做法是什么，避免整个页面刷新。。。
所以这是超级伪代码，但希望这就足够了：(
class App {
const handleLoggedIn = () => {
const token = readFromLocalStorage()
if (token) {
this.setState({token})
}
}
<Header token={this.state.token} />
<Login onLogin={this.handleLoggedIn}
}
class Login {
// After loging in and setting your token to your local storage:
this.props.onLogin()
}
class Header {
if (this.props.token)
<User />
else
<Login />
}
因此，一旦您登录并将令牌设置到本地存储，您只需调用父函数handleLoggeIn，它将尝试从本地存储中检索令牌。如果设置了，它会将其重新设置为您的应用程序状态，这将刷新您的Header组件，因为它的一个道具已经更新
(但这主要取决于您是如何实现其余代码的，以及Dubes指出的从登录流访问父函数的容易程度(
我能想到的两种可能的情况：
场景1当用户登录时，您可以通过某种方式连接到流中。例如，可能您的身份验证系统在header/query中设置了成功标志，或者可能将jwt写入本地存储的组件在您的控件/树中。
在这种情况下，您应该派生该信息，并能够设置您的头组件可以使用的道具。
场景2
您没有任何方法连接到您的身份验证工作流，只能读取本地存储项。对于e.x.，用户已使用SSO登录，您希望反映这一点，而无需刷新整个页面。
我认为您可以使用setInterval来读取cookie的状态，并在头部组件中设置一个状态。只要您没有在setInterval代码中进行密集的计算，它就不应该是开销。请记住在卸载时清除Interval。
看看官方文件中的这个例子。