如何在成功登录后重定向并在reactjs中阻止页面而无需登录？

Question

I am using axios to get data and login but after login i need to redirect to dashboard component and prevent going back and block entering without login. Currently using window.location.href method but i need in react method.

My login Function is:

getLoginDetails(){
    var input = document.getElementById("userInput").value;
    var pass = document.getElementById("userPassword").value;
      axios.post(' http:api here', {
      email:input,
      pin: pass
    })
    .then(function (response) {
      var status = response.data.status;
      if(status === 'success'){
        window.location.href="/dashboard";   
      }else{
        alert("Invalid Userid or Password");
      }
    })
    .catch(function (error) {
      console.log(error);
    });

  }

My button is :

<Button
          className="login-button"
          color={"#36b0ff"}
          variant="primary"

          onClick={this.getLoginDetails}
        >
          Login
        </Button>

Kindly help me out.Redirect Tag and props are shoeing error.

Answer 1

One simple solution would be to check user status in both login and dashboard components (this might not be a good idea if you have a complicated authentication flow).
login component:

class Login extends Component{
    componentDidMount(){
        const isLoggedin = checkLogin();
        if(isLoggedin)
            this.props.history.push('/dashboard');
    }
}
export default withRouter(Login)

and your dashboard:

class Dash extends Component{
    componentDidMount(){
        const isLoggedin = checkLogin();
        if(!isLoggedin)
            this.props.history.push('/login');
    }
}

considering that you store your token in local storage after user loges in:

checkLogin(){
    //you can retrieve your token and verify it in your own way.
    const token = window.localStorage.getItem('token')
    if(!token)
        return false
    return true
}