Question

由于某种原因，当尝试登录时，我需要具有e.preventDefault（防止页面重新加载），以便通过AJAX调用将我的JWT保存到本地存储中。所以当我有这个时：

handleLogin(e) {
//Without e.preventDefault, the jwt token is not save -> cannot access api
e.preventDefault();
const email = $('#email').val()
const password = $('#password').val()
const request = {"auth": {
  "email": email,
  "password": password
}}
$.ajax({
  url: "http://localhost:5000/api/user_token",
  type: "POST",
  data: request,
  dataType: "json",
  success: function (result){
    console.log(result.jwt)
    localStorage.setItem("jwt", result.jwt)
  }
})
}

这是我的简单表格

render(){
return(
  <div>
    <form>
      <input
        name="email"
        id="email"
        type="email"
      />
      <input
        name="password"
        id="password"
        type="password"
      />
      <button
        onClick={this.handleLogin}
      >Login</button>
      <button
        onClick={this.handleLogout}
      >Logout</button>
    </form>
    <button onClick={this.getUsers}>Get Users</button>
    {
      this.state.users
    }
  </div>
)
}

提交成功的登录名后，我希望页面重新加载/转到其他页面。在create-react-app上并使用Rails API 5

Answer 1

您可以尝试以下方法：

success: function (result){
    console.log(result.jwt)
    localStorage.setItem("jwt", result.jwt)
    //page reload
    window.location.reload(true);
    // or route to another page
    window.location.href = 'foo'; // any route
  }

但是我建议您使用React Router，这样您的应用程序就永远不会失去其状态。如有疑问，可以询问。

需要e.preventDefault将JWT保存到localStorage

1 个答案: