Laravel and Vue - Web / Auth middleware is pushing out my users randomly.

Published 5 days ago by mmacdonald

My app has two Vue single page "Apps" within it that Laravel redirects to based on the web / auth middleware.

So all routes go through "/" as usual. If the user is authenticated then they're redirected to the interior app, if the aren't then they are redirected to the Welcome app.

The interior app has a Vue router which chooses the components to display.

The problem though is that somehow people are getting pushed out to the Welcome app fairly often. Often you can even just go back to the www.website.com/ base route in your browser and it will take you back to the interior app again, because you weren't really "signed out".

It's as if the app is forgetting my session token or something temporarily and I don't know how to trace what's causing it.

So that's what I'm hoping for here: that someone can "trace" out what the process is for Laravel -> Vue and where the token might be getting "lost".

Here are the two important routes:

//This one has no middleware
Route::get('welcome', 'Auth\[email protected]')->name('login');

AND

//This one is in the web middleware group AND I'm calling the Auth middleware inside the //HomeController
Route::group(['middleware' => 'web'], function(){
    Route::get('/', '[email protected]');
}

//Home Controller
public function __construct()
 {
       $this->middleware('auth');
  }

Anything else you want to see, just let me know. This one is a bit hard to know what I should include, since I don't really know which file might be the source of the problem.

Thanks for your help!

Best Answer (As Selected By mmacdonald)
jekinney

Hard to describe without a picture... lol

SO each api call to laravel should be validated serverside and only server side.

Any route request using Vue router, validation should be validated with Vue.

So each handles its own validation. For example a basic show page you validate via before routing in Vue. Then allow access to the page. If the page requires a user to be logged in, verify the token in the session storage (or vuex method) and expiration isn't expired of the token.

As the page loads, if an api calls are sent, they will be validated by laravel. So if the api requires the user to be logged in, you must have the authorization header with the token. Otherwise, you will get errors and the user isn't authenticated.

As you see they work in tandem. So I verify token and auth before loading the page, which then verifies my header is set properly for smooth and error-free transitions between pages/routing.

What I see and have done in the past is rely on one validation\auth and not both which leads to bugs. Also setting the token to be saved and proper recovery for each request to set the header (70% of the time that is the issue). Lastly not paying attention to the expiration timestamp of the token, obviously after it's expired your user is "kicked" out.

To solve the above issues I set up my before route file in Vue to check my vuex getter for the token and expiration. If empty, look in session data and run the vuex mutation to set it again (page refresh will clear it out of vuex). Then check expiration, if close to expiration (within an hour for example) close to expired I run an api call in the background to get a new token and update the session data and set the new data in vuex. Obviously, keep validation and auth separated where they need to be and have had very few issues.

jekinney
jekinney
5 days ago (215,385 XP)

Vue should be taking care of authentication for routes. Any API calls then you set the auth header and should be good.

If you are trying to authenticate both Vue routes and API routes server side and our setting your self up for crazy bugs. With Vue you should be checking every route request if your session is set (or vuex or another method) locally only. Then when they send a request, for example, create some data, then you make sure auth header is set with the token and send your request.

99% sure your header isn't set correctly

mmacdonald

@jekinney So you're saying to remove all Laravel middleware basically and make my app use API authentication through Vue?

Only thing I don't understand with this strategy is how you deal with "logged in" vs "logged out"? If the token doesn't exist or isn't valid doesn't the data call just fail? What forces the user out?

Or is there middleware I can set up with Vue somehow so that when you switch Vue routes it checks authentication?

jekinney
jekinney
4 days ago (215,385 XP)

Hard to describe without a picture... lol

SO each api call to laravel should be validated serverside and only server side.

Any route request using Vue router, validation should be validated with Vue.

So each handles its own validation. For example a basic show page you validate via before routing in Vue. Then allow access to the page. If the page requires a user to be logged in, verify the token in the session storage (or vuex method) and expiration isn't expired of the token.

As the page loads, if an api calls are sent, they will be validated by laravel. So if the api requires the user to be logged in, you must have the authorization header with the token. Otherwise, you will get errors and the user isn't authenticated.

As you see they work in tandem. So I verify token and auth before loading the page, which then verifies my header is set properly for smooth and error-free transitions between pages/routing.

What I see and have done in the past is rely on one validation\auth and not both which leads to bugs. Also setting the token to be saved and proper recovery for each request to set the header (70% of the time that is the issue). Lastly not paying attention to the expiration timestamp of the token, obviously after it's expired your user is "kicked" out.

To solve the above issues I set up my before route file in Vue to check my vuex getter for the token and expiration. If empty, look in session data and run the vuex mutation to set it again (page refresh will clear it out of vuex). Then check expiration, if close to expiration (within an hour for example) close to expired I run an api call in the background to get a new token and update the session data and set the new data in vuex. Obviously, keep validation and auth separated where they need to be and have had very few issues.

mmacdonald

@jekinney Wow! Thank you so much! That actually makes a lot of sense. The part I was missing was storing the token in vuex and checking for it in the before route for Vue.

Any chance you could post a bit of code for what the "before route file" in Vue looks like?

Are we just talking about doing

router.beforeEach((to, from, next) => {
    // ..
}

in the Vue router? or do you actually have an entire separate file where you're essentially creating Vue "middleware"?

Please sign in or create an account to participate in this conversation.