Question

102

Why Redirected when going from /login to / via a navigation guard. is appearing?

rated 0 times [ 107] [ 5] / answers: 1 / hits: 9098 / 3 Years ago, tue, february 2, 2021, 12:00:00

Here the router guard is working fine on my vue app, but after logging in, the following error appears on console.

Uncaught (in promise) Error: Redirected when going from "/login" to "/" via a navigation guard.

Here is my code snippet.

const routes = [

  {

    path: "/login",

    component: () => import("../views/Auth/Login"),

    meta: { hideForAuth: true },

  },

  {

    path: "/",

    component: DashboardLayout,

    meta: { requiresAuth: true },

    children: [

      {

        path: "home",

        name: "Home",

        component: () => import("../views/Home"),

      },

    ],

  },

];

The Auth guard:

const loggedIn = localStorage.getItem("auth");



router.beforeEach((to, from, next) => {

  if (to.matched.some((record) => record.meta.requiresAuth)) {

    if (!loggedIn) {

      next({ path: "/login" });

    } else {

      next();

    }

  } else {

    next();

  }



  if (to.matched.some((record) => record.meta.hideForAuth)) {

    if (loggedIn) {

      next({ path: "//" });

    } else {

      next();

    }

  } else {

    next();

  }

});

Can't figure out the problem. Thanks in advance !

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

martina

Add To Favorites

Follow

Total Points: 101

Total Questions: 103

Total Answers: 111

Location: Seychelles

Member since Mon, Jun 28, 2021

3 Years ago

martina questions

1 Change text every 3 seconds React useEffect

Wed, Dec 30, 20, 00:00, 4 Years ago

1 How to test Express router catch branch in this scenario using Jest?

Thu, Sep 24, 20, 00:00, 4 Years ago

1 How to show legend tooltip when hover on legend series in ApexCharts.js

Thu, Jul 23, 20, 00:00, 4 Years ago

1 Is there an elegant way using TypeORM to find one record in an array of OneToMany relation and assign it to another field in the entitiy?

Fri, Apr 24, 20, 00:00, 4 Years ago

1 Cypress iterate table rows get specific element in cells

Wed, Apr 22, 20, 00:00, 4 Years ago

View All

answered 3 Years ago deannaalysonl · Accepted Answer

Since next does not exit the guard, the guard will call next a minimum of 2 times per route because you have 2 separate if statements and both will run.

Change the // path to /

call next like return next to exit the function, or structure your if statements so that only one will run.

Set loggedIn inside the guard or it will only be evaluated once, when the router is created

Here's one way to do it that also covers routes having no meta:

router.beforeEach((to, from, next) => {

  const loggedIn = localStorage.getItem("auth");

  const isAuth = to.matched.some((record) => record.meta.requiresAuth);

  const isHide = to.matched.some((record) => record.meta.hideForAuth);



  if (isAuth && !loggedIn) {

    return next({ path: "/login" });

  } else if (isHide && loggedIn) {

    return next({ path: "/" });

  }

  next();

});