Issue with Vue.js, showing the Log in screen shortly, when user authenticated (full page refresh)

Question

I have my routing working fine, using navigation guards so that user is not able to visit login or register routes once signed in.. However when I type in in addres bar /auth/signin , login screen does appear shortly before redirecting to dashboard (as it detects in beforeEach that the route is requiresGuest).

router.beforeEach(function (to, from, next) {
    // prevent access to login & register after signing in
    if (to.matched.some(record => record.meta.requiresGuest)
        && auth.user.authenticated)
    {
        next({
            path: '/dashboard'
        });
    }
    if (to.matched.some(record => record.meta.requiresAuth)) {
        // this route requires auth, check if logged in
        // if not, redirect to login page.
        if (!auth.user.authenticated) {
            next({
                path: '/auth/signin',
                query: { redirect: to.fullPath }
            })
        }
    }
    next() // make sure to always call next()!
});

Is there a way to prevent component from flash-appearing like that!? Isn't that beforeEach triggered before the component is even created?

Answer 1

Change your if else conditional statements.

router.beforeEach(function(to, from, next) {
  // prevent access to login & register after signing in
  if (to.matched.some(record => record.meta.requiresGuest) && auth.user.authenticated) {
    next({
      path: '/dashboard'
    });
  } else if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.user.authenticated) {
      next({
        path: '/auth/signin',
        query: {
          redirect: to.fullPath
        }
      })
    }
  } else {
    next() // make sure to always call next()!
  }
})