Reactjs 反应路线受保护路线

我仍然是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 = (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

应该是什么样子的，它会根据Login.js中的

响应.status

来检查这个人是否登录，并在App.js中创建一个

isLoggedIn

状态变量，用它来决定是否呈现其他路由。像这样,

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

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

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

render（）{
让privateRoutes=null；
if（this.state.isLoggedIn）{
私家路=(
);
}
{privateRoutes}
}

---

不用说，

isLoggedIn

需要根据submit方法的值进行更新

没错，您必须创建一个状态变量并使用该变量来保护路由。