时间戳

首页 > 解决方案 > 需要 e.preventDefault 将 JWT 保存到 localStorage

ajax - 需要 e.preventDefault 将 JWT 保存到 localStorage

问题描述

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

标签： ajaxreactjsformsjwt

解决方案

在你的情况下，你可以试试这个：

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
  }

但我建议使用反应路由器，这样你的应用程序就永远不会失去它的状态。如果你有任何疑问，你可以问。

推荐阅读