重新加载ReactJS组件以从本地存储读取数据的最佳方法

所以这是超级伪代码,但希望这已经足够了:)

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

因此,登录并将令牌设置为本地存储后,只需调用父函数handleLoggedIn,该函数将尝试从本地存储中检索令牌。如果设置了,它将重新设置为你的应用程序状态,这将刷新你的头组件,因为它的一个道具已经更新

(但这主要取决于如何实现其余代码,以及Dubes指出的从登录流访问父函数的容易程度)

我可以想到两种可能的情况:

情景1 当用户登录时,您可以某种方式连接到流中。对于e.x.可能您的身份验证系统正在header/query中设置成功标志,或者将jwt写入localstorage的组件在您的控件/树中。

在这种情况下,您应该获得该信息并能够设置头组件可以使用的道具。

情景2

您没有任何连接到身份验证工作流的方法,只能读取localstorage项。对于e.x.用户已使用SSO登录,您希望反映这一点,而不必刷新整个页面。

我想你可以用 setInterval 读取cookie的状态并在头组件中设置状态。只要在setInterval代码中不进行密集计算,就不应该是开销。请记住在卸载时清除间隔。

看一看 this example 在官方文件中。