Need e.preventDefault to save JWT into localStorage - ajax

Question

For some reason, when trying to login I need to have e.preventDefault (prevent page reloading) in order to save my JWT into local storage with an AJAX call. So when i have this:
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)
}
})
}
Here is my simple form
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>
)
}
I want my page to reload/go to a different page after submitting a successful login. On create-react-app and using a Rails API 5

Answer 1

In your case, you can try this:
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
}
But I would recommend to use react router so your app will never loose it's state.
If you have any query, you can ask.