为什么vue router会给我这个错误?要明确的是,登录流按预期工作,但我想a)摆脱错误,b)理解错误发生的原因.

Error:

Uncaught (in promise) Error: Redirected from "/登录" to "/" via a navigation guard.

Login flow

  1. 开始注销,但输入需要验证的URL(即除"/登录"之外的任何内容)
  2. 被重定向到"/登录"(如预期).
  3. 登录
  4. 成功从步骤#1重定向到起始Url,但出现上述错误的情况除外.

Login action:

doLogin({ commit }, 登录Data) {
  commit("登录Start");
  axiosClient
    .post("/jwt-auth/v1/token", {
      username: 登录Data.username,
      password: 登录Data.password,
    })
    .then((response) => {
      commit("登录Stop", null);
      commit("setUserData", response.data);
      this.categories = airtableQuery.getTable("Categories");
      commit("setCategories", this.categories);
      this.locations = airtableQuery.getTable("Locations");
      commit("setLocations", this.locations);
      router.push("/"); // push to site root after authentication
    })
    .catch((error) => {
      console.log(error.response.data.message);
      commit("登录Stop", error.response.data.message);
      commit("delUserData");
    });
},

Router:

const routes = [
  {
    path: "/登录",
    name: "Login",
    component: Login,
    meta: { requiresAuth: false },
  },
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: { requiresAuth: true },
  },
];

let entryUrl = null;
router.beforeEach((to, from, next) => {
  let localStorageUserData = JSON.parse(localStorage.getItem("userData"));
  let storeUserData = state.getters.getUserData;
  let userData = localStorageUserData || storeUserData;
  let isAuthenticated = userData.token !== "" && userData.token !== undefined;
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      if (to.name !== "Login" && to.name !== "Home") {
        entryUrl = to.fullPath;
      }
      next({ name: "Login" });
    } else if (entryUrl) {
      let url = entryUrl;
      entryUrl = null;
      next(url);
    } else {
      next();
    }
  } else {
    next();
  }
});

推荐答案

错误消息将在下一版本的vue router中更新.错误将显示为:

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

在代码的某个地方,在被重定向到"/登录"后,您正在重定向回"/".vue路由也在抱怨.您需要确保每个导航操作只有一个重定向.

Vue.js相关问答推荐

如何使用Nuxt 3动态处理无限嵌套路由?

Vue路由路径匹配行为

检测Vue3/Vue-test-utils中的Vuex还原/Mutations

如何防止Nuxt3重新加载时滚动跳到网页顶部

Vuejs 通过数据键迭代复杂对象

将 v-calendar 与以时间和日期格式出现的事件一起使用

当try 更新 Vue 3 中的关联数组中的单个元素时,所有值都会更新

Vuetify 扩展面板,面板标题左侧带有图标

webpack vue-loader 配置

Vue 单元测试:您正在开发模式下运行 Vue?

vuejs中watch方法和计算方法有什么区别

axios.patch / axios.put 在 Vue 和 Laravel 中不起作用

Vuejs:我应该在 vue-router SPA 中的哪里放置一些常用的 js 工具?

为 webpack HMR Vue.js 包含来自外部项目文件夹的可导入模块

在加载数据之前触发mounted方法 - VueJS

异步方法不等待函数

Vuex 存储数据总是驻留在内存中?

vue组件中导入和使用three.js库

使用 Vue.js 获取所有选中复选框的列表

Vue.js 3 - 替换/更新react性对象而不会失go react性