vuejs router in loop

Question

I have below beforeEach code in my vue js. I need to only check for loggedIn and not authRequired. If I remove the authRequired from the if condition, this function looks. Is there any other way I can just check localstorage value and not check authRequired.

router.beforeEach((to, from, next) => {
  const publicPages = ['/login', '/register'];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = localStorage.getItem('user');

  if (authRequired && !loggedIn) {
    return next('/login');
  }

  next();
})

I have tried before code. Which gets stuck in continuous loop.

router.beforeEach((to, from, next) => {
  const publicPages = ['/login', '/register'];
  const loggedIn = localStorage.getItem('user');

  if (!loggedIn) {
    return next('/login');
  }

  next();
})

`if (authRequired && !loggedIn) { next('/login');} else { next(); }` — bcjohn, May 08 '19 at 08:47
if (!loggedIn && to.path !== '/login') { return next('/login') } — User 28, May 08 '19 at 08:53
@User28 there will be more that one public path. And path as to redirect to its own public path. — test, May 08 '19 at 08:57
What do you mean `And path as to redirect to its own public path`? Because from your code you only redirect to `/login`. — User 28, May 08 '19 at 09:01
@User28 thats why i said. whatever public path it comes from, redirect to the same public path. — test, May 08 '19 at 09:03
Oh i just understand so sorry. And I think @elad-frizi is good. — User 28, May 08 '19 at 09:09
I posted a solution I found for vue-router v4.x here: https://stackoverflow.com/a/68009594/1219079 — Matteo Piazza, Jun 16 '21 at 20:31

score 1 · Accepted Answer · answered May 08 '19 at 09:03

I can't see any way If you want to keep using the global guards (the router.beforeEach). If you are willing to stop using the global route guards you can use the beforeEnter and apply it to every route manually. In this solution will be able to use the second function on every route except the 'login' route.

const authGuard = (to,from,next) => {
  const loggedIn = localStorage.getItem('user');

  if (!loggedIn) {
      return next('/login');
    }

    next();
}

const routes = [
    {
        path: '/login',
        component: Login
    },
    {
        path: '/someProtectedRoute',
        component: Bar,
        beforeEnter: authGuard
    },
    {
        path: '/anotherProtcted',
        component: Bar,
        beforeEnter: authGuard
    }
]

vuejs router in loop

1 Answers1