时间戳

首页 > 解决方案 > 如何在 beforeRouterEnter 保护中调用 next()

javascript - 如何在 beforeRouterEnter 保护中调用 next()

问题描述

我已经在这个问题上停留了几个小时。我正在使用 Vue3

我正在尝试使用beforeRouterEnter警卫来检查当前登录的用户角色，并基于此重定向用户以适当的路线。

提交登录表单（来自登录页面）后，userRoleId存储在 vuex 中，我被重定向到主页。主页有以下脚本：

beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$store.getters.userRoleId == USER) {
        next("/us");
        return;
      }
      if (vm.$store.getters.userRoleId == ADMIN) {
        next("/ad");
        return;
      }
      if (vm.$store.getters.userRoleId == SUPER_ADMIN) {;
        next("/sa");
        return;
      }
        next();
    });
  },

我不断收到以下警告：从“/”到“/”时，在一个导航守卫中不止一次调用了“下一个”回调。它应该在每个导航守卫中准确调用一次。这将在生产中失败。

错误出现在以下情况：我没有登录并被移动到 else 块（一旦 next()到达该行），或者当我登录并从内部 whieverif声明为真时，一旦next()到达 - 导致重新- 直接不工作。

标签： javascriptvue.jsvuexrouter

解决方案

next在回调内部调用是错误的next。此时导航已经完成，这应该是一个重定向，router.push而这种逻辑属于组件mounted（next回调在它之后运行）而不是路由器守卫。

这里不应该有重定向，因为它们是不必要的。store 是全局的，可以直接导入而不是在vm.

它应该是：

import store from '...';
...
beforeRouteEnter(to, from, next) {
  if (store.getters.userRoleId == USER) {
    next("/us");
  } else if ... {
    ...
  } else {
    next();
  }
},

推荐阅读