Laravel/Vue SPAs: How to send AJAX requests and not run into CSRF token mismatch exceptions
Creating SPAs or PWAs is very easy in VueJS. As well as creating APIs on Laravel (or Lumen). That’s why I use this pair of Vue + Laravel.
The Problem
And everything is cool until the session is expired and CSRF token is expired too. What to do in this situation? We can’t send API requests anymore because the token is expired. So we can do it either by refreshing a page automatically or asking a user to do so in some messages like “Hey, your session is expired, please click <here> to extend”. Both options are not options actually because we know that the user experience is a pretty important thing so it would be great to not to bother users with randomly refreshing pages (of course there could be some unsaved data) or showing boring messages. The other non-option could be turning off CSRF at all. Which of course is a bad practice and may lead to security pitfalls.
After hours of googling, I found lots of questions and some answers on them but no real solutions which could work for me. Here is my solution to the problem and I hope you will find it useful for your SPA project as well.
