反应路线受保护的路线

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>

其中登录页面是“登录屏幕”。

但是我想做的是如果您未登录，则无法访问/ Upload和/ materials。

现在，为了知道某人已登录，我在LogIn.js上安装了 onSubmit函数

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中的response.status检查该人是否已登录

Answer 1

在App.js中创建一个isLoggedIn状态变量，并使用它来决定是否呈现其他路由。 像这样，

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方法的值进行更新