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

反应路线受保护的路线

1 个答案: