Question

我正在使用react路由器v4并尝试实现受保护的api视图。例如，如果用户在未登录的情况下转到/add/网址，则会将其重定向到/login/，然后成功登录/add/。

我能够使用from this post这个想法来实现它。但是，每当加载应用程序的初始http请求来自受保护的URL时，我都会遇到问题。

E.g。当我进入浏览器'/add/'并点击回车时，我遇到异步问题，我的应用程序没有时间向服务器发出ajax请求以检查登录，结果路由器最终路由到/login/，因为ajax身份验证请求尚未完成。

有人建议登录工作流程是否应该一般处理，考虑到用户可以在'/add/'这样的受保护网址上而不是在主页'/'上开始会话？

Answer 1

找到一个简单的标准React模式解决方案。除非ajax检查中的日志已完成，否则不要渲染<Route>组件。

因此，当应用首次加载时，请将状态checkingLogIn初始化为true，并且不要呈现任何<Route>组件，除非它变为false。当ajax函数检查登录完成时，请调用setState将checkingLogIn设置为false。这将导致<Route>正确呈现和重定向。

使用示例代码编辑：

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

}

在浏览器上点击Refresh后，进行React Router v4登录检查

1 个答案: