Реагировать на маршруты защищенных маршрутов

Question

Я все еще новичок в программировании React, и я совершенно не понимаю, как делать защищенную маршрутизацию.

Итак, у меня есть это в моем App.js

<Router>
  <div className="App">
    <Route exact path="/" component={Loginscreen} />
    <PrivateRoute path="/upload" component={UploadScreen} />
    <PrivateRoute path="/materials" component={Materials} />
  </div>
</Router>

, в котором целевой страницей является экран входа в систему.

Но я хочу, чтобы вы не могли посетить / Загрузить и / материалы, если вы не вошли в систему.

Теперь, чтобы иметь возможность узнать, что человек вошел в системув, у меня есть onSubmit func on LogIn.js

onSubmit = (e) => {
  e.preventDefault();
  var apiBaseUrl = "http://127.0.0.1:8000/api/auth/login";
  var self = this;
  var payload={
      "email":this.state.email,
      "password":this.state.password
  }
  var config = {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    withCredentials: false
  }

  axios.post(apiBaseUrl, payload, config)
  .then(function (response) {
    console.log(response);
    if(response.status == 200){
        console.log("Login successful");
    }
    else if(response.status == 204){
        console.log("Username password do not match");
        alert("username password do not match")
    }
    else{
        console.log("Username does not exists");
        alert("Username does not exist");
    }
})
.catch(function (error) {
console.log(error);
});
}

Я думал, что мой PrivateRoute будет выглядеть так, чтобы проверить, если человек вошел в систему в соответствии сresponse.status в Login.js

Answer 1

Создайте переменную состояния isLoggedIn в App.js и используйте ее, чтобы решить, следует ли отображать другие маршруты.Таким образом,

render() {
   let privateRoutes = null;
   if(this.state.isLoggedIn){
      privateRoutes =(
          <Route path="/upload" component={UploadScreen} />
          <Route path="/materials" component={Materials} />
      );
   }
   <Router>
     <div className="App">
       <Route exact path="/" component={Loginscreen} />
       {privateRoutes}
     </div>
   </Router>
}

Излишне говорить, что isLoggedIn необходимо обновить на основе значения onSubmit method