Reactjs 存储在react中授权的用户

我在寻找一种方法，当用户授权时，我存储

用户授权状态

，这样每次我都可以检查用户是否

授权

。但是，当我执行以下代码时，未授权用户：（Master.jsx->render（））

---

问题是will

组件willmount

将在

之后执行这是react-redux的一个经典用例。我建议在服务器端处理所有身份验证，其中服务器对授权或未授权用户的响应为true或false。在此之前，您可以在UI上显示加载图标

但是，如果您想继续并想在UI上验证用户，请查看react redux

基本上你必须这样做

当用户登录时

在action.js中发送登录操作
在reduce.js中捕获登录操作，并将用户凭据存储在存储中
当用户重新加载/打开页面时

在action.js中发送isLoggedIn操作
减少isLoggedIn操作并检查用户是否已在该状态下退出。如果是，返回允许程序继续。如果没有，请要求用户重新登录
希望有帮助
 这是react-redux的经典用例。我建议在服务器端处理所有身份验证，其中服务器对授权或未授权用户的响应为true或false。在此之前，您可以在UI上显示加载图标

但是，如果您想继续并想在UI上验证用户，请查看react redux

基本上你必须这样做

当用户登录时

在action.js中发送登录操作
在reduce.js中捕获登录操作，并将用户凭据存储在存储中
当用户重新加载/打开页面时

在action.js中发送isLoggedIn操作
减少isLoggedIn操作并检查用户是否已在该状态下退出。如果是，返回允许程序继续。如果没有，请要求用户重新登录
希望有帮助
 如果您看到我的问题，问题是调用
react路由器
后，将执行我的存储处理器。因此，在我将用户数据存储在redux存储区之前，用户已被授权
react router
重定向到另一个页面！如果您看到我的问题，问题是调用
react路由器
后，将执行我的存储处理器。因此，在我将用户数据存储在redux存储区之前，用户已被授权
react router
重定向到另一个页面！
<Route exact path="/" render={() => {
  console.log('this.props.authed: ', this.props.authed, "this.props: ", this.props)
  return (
  this.props.authed
  ? <Home />
  : <Redirect from="/" to="/login"/>
)}
}/>

componentWillMount = () => {

  firebaseAuth().onAuthStateChanged((user) => {

        if (user) {
        this.props.login(user)
        } else {
         this.props.logout()
        }
      })
}