Vue-Router infinite loop with redirect route

Question

I'm trying to find the best way to redirect non-authenticated users to the login page/screen. Currently I'm trying to catch authentication with JWT tokens in the route before loading components. However, I'm getting snagged on the router.beforEach() with an infinite loop:

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requiresAuth)) {
    alert('needs auth!'); // used for testing
    if (localStorage.getItem('jwt') == null) {
      next('/login'); // here is where the infinite loop hits
    } else {
      next();
    }
  } else {
    next();
  }
});

When I reach a route that needs to be authenticated, the next('/login') call gets stuck in an infinite loop. I can avoid this like so:

if (to.path !== '/login') {
    next('/login');
} else {
    next();
  }

But that calls the alert twice and seems like an inefficient and/or hacky way to go about this. Is there a better way to test for conditions for routes than this? Thanks for any tips, advice, help

I posted a solution for vue-router v4.x here: https://stackoverflow.com/a/68009594/1219079 — Matteo Piazza, Jun 16 '21 at 20:34

score 1 · Accepted Answer · answered Dec 30 '19 at 18:46

I don't think this is hacky.

if (to.path !== '/login') {
    next('/login');
}

As you are changing the route, it will naturally trigger router.beforeEach again.

You could move it above if (to.matched.some(r => r.meta.requiresAuth)) { to avoid doing that check unnecessarily with

if (to.path === '/login') {
    next();
}

An alternative is to jump out of the SPA with window.location, but I don't think that is better.

Vue-Router infinite loop with redirect route

1 Answers1