как перенаправить после успешного входа в систему и заблокировать страницы без входа в систему reactjs?

Question

Я использую топор ios для получения данных и входа в систему, но после входа в систему мне нужно перенаправить на компонент панели мониторинга и предотвратить возврат и заблокировать вход без входа в систему. В настоящее время используется метод window.location.href, но мне нужен метод реагирования.

Мой логин Функция:

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);
    });

  }

Моя кнопка:

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

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

Пожалуйста, помогите меня. Прямой тег и реквизиты выковывают ошибку.

Answer 1

Одним из простых решений будет проверка статуса пользователя как в компонентах входа в систему, так и в панели мониторинга (это может быть плохой идеей, если у вас сложный процесс аутентификации).
компонент входа в систему:

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

и ваша панель управления:

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

, учитывая, что вы храните свой токен в локальном хранилище после того, как пользователь переместился в:

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
}