Redirected when going from to via navigation guard

Question

I'm trying to protect my Vue components using the Vue router authentication guard.
Case scenario: unauthenticated user lands on home page ("/" route) and he's trying to access "/profile", but that's a private component, so he'll be redirected by the vue router to "/auth/profile", so he'll authenticate and then the Auth component will redirect the user to the "/profile" component, because he got its path in the URL.

That's my guard

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.private)) {
    if (!store.getters.getUser) {
      //console.log("PRIVATE - NOT authenticated");
      next({ path: "/auth" + `${to.path}` });
    } else {
      //console.log("PRIVATE - authenticated");
      next();
    }
  } else {
    //console.log("NOT PRIVATE");
    next();
  }
});

Everything works as expected, but I get an error and it's annoying

Redirected when going from "/" to "/profile" via a navigation guard.

Seems to be a bug, which was fixed on version 3.3.1. Otherwise try to delete your node_modules folder and package-lock.json file and run npm install again. — gurumaxi
You aren't doing anything wrong, see my answer here stackoverflow.com/a/64808960/7662112 — Kris
Here's the link that @gurumaxi is talking about of the 3.3.1 bugfix: github.com/vuejs/vue-router/blob/dev/… — fredrivett

PatricNox PatricNox · Accepted Answer · 2020-09-10T10:07:31

Somewhere in your code, after being redirected to "/profile", you are being redirected back to "/". And that is what the vue-router is complaining about.

So the problem resides in being redirected multiple times per action.

You'll want to make sure you only have one redirect per navigation action.

Redirected when going from to via navigation guard

2 Answers