使用 Axios 身份验证的反应路由器

Question

目标是防止用户在未登录的情况下访问任何页面。

问题是在我能够调用请求以使用 Axios 请求访问之前，路由重定向到登录页面。

我正在使用路由并执行发布请求以获取令牌访问权限。

如果参数auth.isAutenticated等于true表示用户可以访问该页面，否则显示重定向到/login。

我用的是privateRoute，如下：

let auth = {
  isAutenticated: false
}

axios.post('/auth/getUserInfo', { withCredentials: true })
      .then(res => {
        const dados = res.data
        **auth.isAutenticated = true**

      }).catch(err => {
        console.log('ERRO: ' + err)
      })

const PrivateRoute = ({ component: Component, ...rest }) => (

  <Route {...rest} render={(props) => (
    auth.isAutenticated === true
      ? <Component {...props} />
      : <Redirect to='/Login' />

  )} />
)


class App extends React.Component {
  
  render() {

    return (
      <div>
        <Header />
        <Router>
          <PrivateRoute path='/' exact component={Home} />
          <Route path='/Login' component={Login} />
          <Route path='/Signup' component={Signup} />
          <Route path='/Confirmation' component={Confirmation} />
          <Route path='/Activation' component={Activation} />
          <Route path='/PasswordReset' component={PasswordReset} />
          <Route path='/EmailSent' component={EmailSent} />
          <Route path='/PasswordChange' component={PasswordChange} />
        </Router>
        <Footer />
      </div>
    )
  }
}
export default App

如何等待 http 请求以检查用户是否可以留在页面上或必须重定向到登录页面？

我认为“问题”可能与 axios 发布请求的异步性质有关，因为当我创建一个函数来直接更新 de auth.isAutenticated，而不是从 HTTP 请求中获取时，它可以工作。

Answer 1

将axios.post的调用移动到组件内部，在这种情况下，应该在componentDidMount方法中，如果你使用钩子你应该使用useEffect（我强烈建议你检查this）。