Reactjs 反应-在渲染应用程序之前检查身份验证 我真的困在这里，我不知道为什么，我有点新的反应，所以我能得到的每一个帮助都会被认为是伟大的：D！p>

当用户登录时，我在localstorage中存储了一个JWT令牌，当我们刷新页面时，我有这个功能来检查用户是否经过身份验证，以便我们可以再次设置用户

async checkLoginStatus() {
    console.log('checking');
    const token = localStorage.getItem('sid');
    if (token) {
      let user = await VerifyUser(token);
      if (user) {
        this.setState({
          isLoggedin: true,
          user: user
        });
      } else {
        this.setState({
          isLoggedin: false,
          user: {}
        });
      }
    } else {
      this.setState({
        isLoggedin: false,
        user: {}
      });
    }
  }

  componentDidMount() {
    this.checkLoginStatus();
  }

这是我的自动取款机，不要介意代码的差异，测试一些东西

<Router>
            <Header handleLogin={this.handleLogin} isLoggedin={this.state.isLoggedin} handleLogout={this.handleLogout} />
            <Switch>
              <Route exact path="/about" component={About} />
              <Route exact path="/portfolio" component={Portfolio} />
              <Route exact path="/" component={ () => <Home user={this.state.user}/> } />
              <PrivateRoute exact path="/user" isLoggedIn={this.state.isLoggedin} component={User} />
            </Switch>
        </Router>

} />

这是我的私人路线

const PrivateRoute = ({ component: Comp, isLoggedIn, path, ...rest }) => {
    return (
      <Route path={path} {...rest} render={props => {
          return isLoggedIn ? (<Comp {...props} />) : (<Redirect to="/" />);
        }}
      />
    );
  };

export default PrivateRoute;

const PrivateRoute=（{组件：Comp，isLoggedIn，path，…rest}）=>{
返回(
{
返回isLoggedIn？（）：（）；
}}
/>
);
};
导出默认私有路由；

当用户登录时，他们可以访问受保护的页面，但当他们注销时，他们无法访问。这样就行了。当我在网站的任何地方刷新页面时，它会检查我们是否有令牌，并登录用户，这也不是问题所在

---

问题是当我站在/user上时，

isLoggedIn

的初始值为false，这会触发重定向（在异步更新状态之前）：

isLoggedIn？() : ()

您需要的是“加载”、“登录成功”和“登录失败”的3种状态

具有2个布尔变量的示例：

state = {
  isLoading: true,
  isLoggedIn: false,
  user: {}
}
...
    this.setState({
      isLoading: false,
      isLoggedIn: false
    })
...
    isLoggedIn ? (<Comp {...props} />) : (isLoading ? 'Loading...' : <Redirect to="/" />)

状态={
孤岛加载：是的，
伊斯洛格丁：错，
用户：{}
}
...
这是我的国家({
孤岛加载：false，
伊斯洛格丁：错
})
...
伊斯洛格丁？（）：（正在加载？正在加载…：）

---

（初始状态

isLoggedIn:null

和条件

isLoggedIn===null

也可以实现同样的效果，如果您喜欢更少的变量）

请直接在此处提供代码，以避免单击和转到链接，并查看images@MohamedELAYADI怎么做，复制粘贴？是的，请。您需要在受保护的路由内执行isLoggedIn检查，该函数应在受保护的路由内调用。在这里，您将找到一个示例@SifatHaque。现在，我更新了代码。谢谢您的回答，只有一个问题。我什么时候设置从false加载true等等？如果你只需要加载一次，那么永远不会。如果您可以在手动单击注销后将

isLoggedIn

从true重置为false（并将

user

重置为空对象），那么在注销后手动单击Login之后将是重置

isLoading

的正确位置。这修复了所有问题。非常感谢你，我爱你！

state = {
  isLoading: true,
  isLoggedIn: false,
  user: {}
}
...
    this.setState({
      isLoading: false,
      isLoggedIn: false
    })
...
    isLoggedIn ? (<Comp {...props} />) : (isLoading ? 'Loading...' : <Redirect to="/" />)