时间戳

首页 > 解决方案 > 重新加载 ReactJS 组件以从 localStorage 读取的最佳方法

reactjs - 重新加载 ReactJS 组件以从 localStorage 读取的最佳方法

问题描述

上下文：我有一个<Header />组件，它有一个将用户重定向到<SignIn />组件的按钮。该 <Header />组件始终显示，但是当用户登录时，登录按钮会消失并由用户名代替。

我不会详细介绍身份验证机制，但我们只是说它基于存储在 localStorage 中的 JWT。我有以下代码<Header />来读取cookie并确定是否显示登录按钮：

  componentDidMount() {
    const token = localStorage.getItem("token");
    if (token) {
      this.props.fetchUser();
    }
  }
...

但是，这仅适用于浏览器刷新或我使用本机 JS window.reload()。如果我使用反应路由器重定向，<Header />组件中的登录按钮不会刷新并且仍然显示（尽管设置了 cookie）。

我想知道最佳做法是什么，并避免整个页面刷新......

标签： 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，它将尝试从本地存储中检索令牌。如果已设置，它将重新设置为您的 App 状态，这将刷新您的 Header 组件，因为它的道具之一已更新

（但这主要取决于您如何实现其余代码，以及从 Dubes 指出的登录流程中访问父函数的难易程度）

推荐阅读