How to handle TokenMismatchException when session expires on the client side
Greetings, friends!
How do you usually handle TokenMismatchException on the client side?
I dont want to handle the exception by redirecting them to a log in page as all the requests are handled via ajax including authentication.
So my solution so far is: catch the mismatch exception in Handler.php and return a json response with a new token. on the client side, use the new token to continue the intended process. However, I couldnt renew the token for some reason. This is what i have:
setup csrf_token in a global js file:
$(function () {
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content') }
});
});
render method in app/exceptions/handler.php:
public function render($request, Exception $e)
{
if ($this->isHttpException($e))
{
return $this->renderHttpException($e);
}
else if ($e instanceof TokenMismatchException)
{
if ($request->ajax()) {
return response()->json([
'message' => 'TokenMismatchException',
'token' => csrf_token()
]);
}
}
else
{
return parent::render($request, $e);
}
}
in authentication.js:
$.ajax({
type: "POST",
url: "/auth/login",
data: {
"email" : $('#login_email').val(),
"password" : $('#login_password').val(),
'remember': $('#login_remember').is(':checked')
},
success: function(response) {
if (response.message === 'TokenMismatchException') {
console.log(response); //message and token exist
//if catch the exception, use the new token to set up the ajax headers and login again
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': response.token }
});
login();
}
console.log('logged in');
},
error: function(xhr, status, err) {
}
});
for some reason, $.ajaxSetup in the callback is not resetting the headers with the new token, so calling login again in the callback yields an infinite loop.
what should i do differently. how should i renew the token on the client side?
thanks in advance.
Please or to participate in this conversation.