Question

我正在使用axios来获取数据和登录，但是登录后我需要重定向到仪表板组件，并防止返回并阻止未经登录的进入。当前使用window.location.href方法，但是我需要使用react方法。

我的登录功能是：

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
}

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

1 个答案: