Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vincent15000's avatar

Vue router - beforeEach

Hello,

I have this code.

i'm trouble with how persist the connexion if the user refreshes manually the browser.

Is it a good idea to do what I have put in comments at the beginning of the callback inside the beforeEach guard ?

I have found this idea on the web, but I don't think that it's a good idea.

router.beforeEach((to) => {
  // check if authStore.authUser is null
  // if null, try to get user
  // if I get user, then the user is connected
  // if I don't get user, then the user isn't connected

  if (to.meta.requiresAuth && !authStore.authUser) {
    return { name: 'login' }
  }

  if (to.name == 'login' && authStore.authUser) {
    return { name: 'dashboard' }
  }

  if (to.meta.notfound) {
    if (authStore.authUser) {
      return { name: 'dashboard' }
    } else {
      return { name: 'home' }
    }
  }
})

Where would you suggest me to put this code ?

In the App.vue file ?

In fact I think that it has to be in a file that is loaded only once when the browser loads the root view.

// check if authStore.authUser is null
// if null, try to get user
// if I get user, then the user is connected
// if I don't get user, then the user isn't connected

Thanks a lot for your suggestions.

V

0 likes
12 replies
martinbean's avatar

@vincent15000 Would you not be better off just intercepting error responses? If you hit a page and it returns a 401 Unauthorized response then you can display a modal or something in your SPA telling the user they’re logged out, and to try logging in again.

1 like
vincent15000's avatar

@martinbean Isn't there a problem doing so ?

I mean ... A user is connected and refreshes the browser manually. Logically he is yet connected. But given that he has refreshed the browser manually, the state is reinitialized and the frontend behaves as if the user is not connected.

Is there another way that takes into account this constraint ?

vincent15000's avatar

@martinbean That's probably because I have some guards to conditional redirect to another route if not connected and I check the state in the store to decide if I need to redirect or not.

martinbean's avatar

A user is connected and refreshes the browser manually. Logically he is yet connected. But givent that he has refreshed the browser manually, the state is reinitialized and the frontend behaves as if the user is not connected.

@vincent15000 And this is the problem Sanctum was made to solve, by using cookies to authenticate users, instead of saving state client-side that’s lost with a simple page reload.

1 like
vincent15000's avatar

@martinbean Hmmm ... ok ... well ... I use Sanctum and when a user authenticates, I can see the cookies in the devtools of the browser.

The backend and the frontend are on different subdomains but on the same top-level domain.

I had already tested with VueJS integrated inside the Laravel project with the front in the src folder.

But I didn't succeed to have the authentication persisted with the backend and the front on 2 different subdomains.

Is there something special to do ?

vincent15000's avatar

@martinbean I think that I'm clumsy in my explanation.

In fact, in the frontend, I only need a way to check if the user is authenticated. That's for checking if a user tries to load a page without being authenticated.

For example with the guards.

if (to.meta.requiresAuth && !authStore.authUser) { // for example here if the route needs authentication and if the user isn't authenticated
  return { name: 'login' }
}

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !authStore.authUser) { // for example here if the route needs authentication and if the user isn't authenticated
    return { name: 'login' }
  }

  if (to.name == 'login' && authStore.authUser) {
    return { name: 'dashboard' }
  }

  if (to.meta.notfound) {
    if (authStore.authUser) {
      return { name: 'dashboard' }
    } else {
      return { name: 'home' }
    }
  }
})

I don't have found any other way than storing some flag in the sessionStorage or in the store (pinia). There is also the possibility to send a request for each route to check if the user is authenticated but it's probably not a good idea to send a request before each route resolution.

MaverickChan's avatar

i remember that vue-router official website has an example, something like this

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!condition)) {
            next({
                path: '/login',
                query: { 
                    redirectedFrom: to.fullPath 
                }
            })
        } else {
            next()
        }
    } else {
        next()
    }
})

you can add your code and modify.

1 like
vincent15000's avatar

@MaverickChan Well ... I don't understand how it can help me to persist the connexion even if the user refreshes manually the browser.

Cemoche's avatar

Hi, you must use Sanctum stateful, if you want to use it stateless you'll have to store the Bearer token in the Local Storage then in the main file (where you create the Vue App) check and set in Pinia the token/user infos if there's something in the Local Storage.

But with Sanctum you should use the stateful method, it's safer and easier.

1 like

Please or to participate in this conversation.