在浏览器上点击刷新后反应路由器 v4 登录检查

Posted 2023-02-21

【中文标题】在浏览器上点击刷新后反应路由器 v4 登录检查

【英文标题】：React Router v4 login check after hitting Refresh on browser

【发布时间】：2017-11-21 18:42:30

【问题描述】：

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

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

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

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

【参考方案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>
      )