Ajax 需要e.preventDefault将JWT保存到本地存储中

出于某种原因，在尝试登录时，我需要使用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>
)
}

render（）{
返回(
登录
注销
获取用户
{
这个是.state.users
}
)
}

---

我希望我的页面在提交成功登录后重新加载/转到其他页面。在CreateReact应用程序上，在您的案例中使用Rails API 5，您可以尝试以下操作：

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路由器，这样您的应用程序将永远不会失去其状态。

---

如果您有任何疑问，可以询问。

谢谢。当我离开e.preventDefault（）时，这确实有效。但是我不明白e.preventDefault（防止重新加载）与windows.location的组合如何保存jwt？为什么会这样？我想我发现了你的问题。将handleLogin（e）{}更改为handleLogin=（e）=>{}。并删除e.preventDefault（）。这是clickListener与DOM的绑定问题。