Question

我有以下代码：

router.beforeEach((to, from, next) => {
  if (to.name !== from.name) {
    store
      .dispatch("fetchCurrentUser")
      .then(() => {
        console.log('then');
        // do something
        next();
      })
      .catch(() => {
        console.log('catch');
        router.push("/login");
        next();
    });
  } else {
    next();
  }
  // next();
});

我正在尝试获取当前用户，如果成功，则使用此数据进行操作，如果请求未成功，则将用户重定向到登录页面。但是next（）调用不起作用，我在控制台中得到了“ then”或“ catch”，但是没有发生重定向，并且开始了无限循环。但是，如果我从条件（带注释的行）中获取next（），则重定向工作正常。

Answer 1

函数结束后string解析。

这意味着注释string[] s = Enum .GetNames(typeof(SystemIO));的发生与承诺结果的结果无关。然后诺言就解决了，您呼叫了另一个promise。

最重要的是，您不需要注释的next，而只需涵盖承诺的解决方法。

Answer 2

要重定向，您应该使用next（'/'）或next（{path：'/'}）。

从文档中：

下一个：功能：必须调用此函数才能解决钩子。的   操作取决于提供给next的参数：

next（）：移至管道中的下一个钩子。如果没有钩子   左侧，导航已确认。

next（false）：中止当前导航。如果浏览器网址为   更改（由用户手动或通过后退按钮更改），将   重置为起始路线。

next（'/'）或next（{path：'/'}）：重定向到其他位置。   当前导航将被中止，并且将开始新的导航。   您可以将任何位置对象传递给next，这允许您指定   诸如replace：true，名称：“ home”之类的选项以及在   路由器链接到prop或router.push

Answer 3

我能够在beforeEach内部实施异步验证，以我的身份验证。

export async function onBeforeEach(to, from, next) {
  let { someUserToken } = to.query
  if (someUserToken) {
    let nextRoute = await authenticate(to)
    next(nextRoute)
  } else {
    const userToken = store.state.application.userToken
    if (!to.meta.public && !userToken) {
      next({ name: 'Forbidden' })    
    } else {
      next()
    }
  }
}

async function authenticate(to) {
  let { someUserToken, ...rest } = to.query

  return store
    .dispatch('application/authenticate', {
      someUserToken
    })
    .then(() => {
      return {
        name: 'Home',
        query: {
          ...rest
        }
      }
    })
    .catch(() => {
      return { name: 'Forbidden' }
    })
}

我希望这会有所帮助。

vue router next（）函数在router.beforeEach中的Promise中不起作用

3 个答案: