Question

我遇到了vue-router的beforeEach钩子问题：我用路由器检查了用户的身份验证。在main.js中，beforeEach钩子是这样的：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && to.name !== 'PasswordReset' && to.name !== 'ForgetPass' && to.name !== 'SsoLogin') {
    Auth.isLogged()
      .then(() => {
        next();
      })
      .catch(() => {
        next(`/login?redirectUrl=${to.fullPath}`);
      });
  }
  next();
});

问题是在重定向发生之前，该网页显示了1秒钟。我尝试将代码放在Vue.use（Router）之前，就像我在互联网上看到的那样，但是它没有解决任何问题。我可以通过在每条路由上使用beforeEnter（）来解决它，但是我想使用全局解决方案，而不必在每条路由上都增加代码。

你能帮我吗？

Answer 1

router.beforeEach((to, from, next) => {
  if(...) {
    Auth.isLogged().then().catch();
  } else {
    next()
  }
}

您需要添加其他内容，因为Auth.isLogged（）是异步的。如果不添加其他内容，则将始终执行最后一个next（）。因此，您将首先看到页面(last next() been executed)，然后页面重定向(code in then() or catch() block been executed)。

Vuejs路由器和beforeEach钩子

1 个答案: