vue-router — Uncaught (in promise) Error: Redirected from “/login” to “/” via a navigation guard

Question

Why is vue-router giving me this error? To be clear, the login flow works as intended but I want to a) get rid of the errro and b) understand why the error is happening.

Answer 1

This error is meant to inform the caller of $router.push that the navigation didn't go to where it was initially intended. If you expect a redirection you can safely ignore the error with the following code.

import VueRouter from 'vue-router'
const { isNavigationFailure, NavigationFailureType } = VueRouter

...

this.$router.push('/')
  .catch((e) => {
    if (!isNavigationFailure(e, NavigationFailureType.redirected)) {
        Promise.reject(e)
    }
  }

See https://github.com/vuejs/vue-router/issues/2932 for a discussion regarding this issue.

Answer 2

I had the same issue, i thought it was config problem but it was not You can try this code

async doLogin({ commit, dispatch }, loginData) {
  commit("loginStart");
  let response = await axiosClient
  .post("/jwt-auth/v1/token", {
    username: loginData.username,
    password: loginData.password,
  })
  return dispacth('attempt', response) 
}

async attempt({ commit }, response) {
  try {
    commit("loginStop", null);
    commit("setUserData", response.data);
    this.categories = airtableQuery.getTable("Categories");
    commit("setCategories", this.categories);
    this.locations = airtableQuery.getTable("Locations");
    commit("setLocations", this.locations);
  }
  catch( (error) => {
    console.log(error.response.data.message);
    commit("loginStop", error.response.data.message);
    commit("delUserData");
  })
}

And in the component where doLogin action is called

this.doLogin(this.loginData)
    .then( () => {
        this.$router.replace('/')
        .catch( error => {
            console.log(error)
        })
    })
    .catch( e => {
        console.log(e)
    })

Answer 3

I had a similar error, but for an onboarding redirect in .beforeEach, which was resolved by replacing in the .beforeEach conditional logic:

 next({ name: "Onboarding" });

with

router.push({ path: 'Onboarding' });

Answer 4

I have the same error. This error created by router.push("/"); row - it trying to say you that pushing to home was interrupted by redirection in navigation guard. But actually, it's not an error because it is an expected behaviour.

I made ignoring of such errors by the following way:

const router = new VueRouter({
    mode: 'history',
    routes: _routes,
});

/**
 * Do not throw an exception if push is rejected by redirection from navigation guard
 */
const originalPush = router.push;
router.push = function push(location, onResolve, onReject) {
    if (onResolve || onReject) {
        return originalPush.call(this, location, onResolve, onReject);
    }
    return originalPush.call(this, location).catch((err) => {
        let reg = new RegExp('^Redirected when going from "[a-z_.\\/]+" to "[a-z_.\\/]+" via a navigation guard.$');
        if (reg.test(err.message)) {
            // If pushing interrupted because of redirection from navigation guard - ignore it.
            return Promise.resolve(false);
        }
        // Otherwise throw error
        return Promise.reject(err);
    });
};

Answer 5

The error message is getting updated in the next version of vue-router. The error will read:

Redirected when going from "/login" to "/" via a navigation guard

Somewhere in your code, after being redirected to "/login", you are redirecting back to "/". And vue-router is complaining about. You'll want to make sure you only have one redirect per navigation action.

Answer 6

If your redirect is after a call to router.push('/someroute) then you can catch this error as router.push() is a promise and you can attach a catch to it as below

$router.push('/somesecureroute')
.catch(error => {
   console.info(error.message)
})