vue router next()函数在router.beforeEach中的Promise中不起作用

ut6juiuv  于 2023-04-21  发布在  Vue.js
关注(0)|答案(4)|浏览(243)

我有以下代码:

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”,但是重定向没有发生,并且无限循环开始。但是如果我从condition(注解行)中获取next(),则重定向工作正常。

pcrecxhr

pcrecxhr1#

要重定向,您应该使用next('/')next({ path: '/' })
来自文档:
下一篇:功能:必须调用此函数来解析钩子。操作取决于提供给next的参数:
next():移动到管道中的下一个钩子。如果没有钩子,则确认导航。
next(false):如果浏览器URL被更改(用户手动或通过后退按钮),它将被重置为来自路由的URL。
next('/')或next({ path:'/' }):重定向到不同的位置。当前导航将被中止,并将启动一个新的导航。您可以将任何位置对象传递给next,这允许您指定诸如replace之类的选项:true,名称:'home'和在router-link's中使用的任何选项来prop或router.push

j8ag8udp

j8ag8udp2#

promise在函数结束后解析。
这意味着注解的next会发生,而不管promise结果的结果如何。然后promise解析并调用另一个next
底线是您不需要注解的next,只需要覆盖promise resolve。

yrefmtwq

yrefmtwq3#

在我的例子中,我尝试将beforeEach函数修改为async并等待promise函数完成。这对我来说很有效!

router.beforeEach(async(to, from, next) => {
  if (to.meta.auth) {
    // need verification
    // This is a promise function 👇
    await widget.user
      .authVerification()
      .then(() => {
        next();
      })
      .catch((error) => {
        // Session expired
        console.log(error);
        next("/login");
      });
  }
}
b1uwtaje

b1uwtaje4#

我能够在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' }
    })
}

希望这能帮上忙。

相关问题