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

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)
    })