How can I make the redirect wait for the response from the server?

Question

first of all I want to mention that I'm completely new to react and javascript in general, I went through a lot of similar question threads however none of the solutions seemed to help as they mostly generated more errors.

The project I'm working on is pretty simple, what I want to do here is: the folowing function is called when the user presses "Login" on the login form, I save the inserted username & password to the state and send it to the server for validation.

I use react-router-dom for the routing and I made it that you can only access the page after loging in, it redirects you to the login page otherwise. So what happens here is on the first press the redirect doesn't happen, the page stays on login.

I understand that this is probably a very stupid way of doing a login system, but perhaps there's a way to make this work?

Thank you for your time.

onSubmit(e) {
    e.preventDefault();
    console.log(this.state);
    var self = this;
    request.post('/user/login')
      .send(this.state)
      .end(function(err, res){
          console.log(res.body);
          if (res.body.isValid) {
              self.props.history.push('/');
          }
        });
}

score 0 · Answer 1 · answered May 06 '17 at 13:02

Simply redirect??

onSubmit(e) {
e.preventDefault();
console.log(this.state);
var self = this;
request.post('/user/login')
  .send(this.state)
  .end(function(err, res){
      console.log(res.body);
      if (res.body.isValid) {
          self.props.history.push('/');
      }else{
        window.location.href="/login";
      }
    });
}

How can I make the redirect wait for the response from the server?

1 Answers1