1

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.

Sabrilogesh K
  • 197
  • 4
  • 16
  • 1
    Does this answer your question? [Programmatically navigate using react router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) – Agney Feb 19 '20 at 06:19
  • 1
    As for blocking entering without login: a) the client needs to move away if a user tries to visit `/dashboard` without being logged in and b) the server mustn't send privileged data unless the client is logged in server-side –  Feb 19 '20 at 06:25
  • @Agney No it doesn't – Sabrilogesh K Feb 19 '20 at 06:30
  • Doesn't your login api return a token of sorts? – zimmerbimmer Feb 19 '20 at 06:36
  • @SametM. No it won't – Sabrilogesh K Feb 19 '20 at 06:38
  • I would keep a piece of state like `isLoggedIn` as boolean, create a PrivateRoute component to render protected routes and Redirect to the login page based on `isLoggedIn` value. – zimmerbimmer Feb 19 '20 at 06:41
  • Instead of window.location.href="/dashboard"; it should be this.props.history.push('/dashboard'). Use arrow function means function (response) use (response) => {} . Api must return token based on which you can check if localStorage have token. if it doesn't then it will redirect back to login. Even if it doesn't return token then on successful login encrypt usename and password with some encryption and store it in localStorage and decode(though this isn't feasible way of doing authentication). – sourav satyam Feb 19 '20 at 06:42
  • this.props .history.push is showing type caught error – Sabrilogesh K Feb 19 '20 at 06:58

1 Answers1

0

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
}
punjira
  • 818
  • 8
  • 21