点击浏览器上的刷新后对路由器v4登录检查作出反应

Question

我正在使用react router v4并尝试实现一个受保护的api视图。例如，如果用户在未登录时转到/add/url，他们将被重定向到/login/，然后在成功登录后转到/add/。

我能够利用这篇文章中的想法来实现它。但是，只要加载应用程序的初始http请求来自受保护的url，我就会遇到问题。

例如，当我在浏览器中输入'/add/'并按enter键时，我遇到了异步问题，我的应用程序没有时间向服务器发出ajax请求以检查登录，因此路由器最终路由到/login/，因为ajax身份验证请求尚未完成。

考虑到用户可能会在受保护的url（如'/add/'）上启动会话，而不是在主'/'上启动会话，是否有人建议一般处理登录工作流？

Answer 1

找到了一个简单的标准React模式解决方案。只是不要渲染

因此，当应用程序第一次加载时，初始化状态check ingLogIn为true，并且不呈现任何

使用示例代码编辑：

componentDidMount(){
// call the ajax function that checks if the user is logged in and update state when it returns; using fetch API here
 fetch(your_url, your_credentials)
   .then(
     that.setState({checkingLogIn: false, isLoggedIn: true})
        )
   .catch(...)
}
// render method of the React component
render(){
    if(this.state.checkingLogIn){
    return (<div>Loading...</div>)
    }
    else {
      return (
       <Route path={some_path} render={props => <SomeComponent {...props} />}></Route>
      )
    }

}