Vue路由器的下一个回调始终在beforeEach中调用

时间:2018-08-16 16:47:27

标签: javascript vue.js vue-router

我正在为某些网址创建防护措施。我正在使用beforeEach评估元参数并确定用户是否可以看到页面。

router.beforeEach((to, from, next) => {
  var isLoggedIn = localStorage.getItem('cacheTokenId');

  if(to.meta.guestOnly && isLoggedIn) {
    next({ name: 'cars' })
  } else if(to.meta.authOnly && !isLoggedIn) {
    console.log("authOnly")
    next({ name: 'login' })
  }

  next()
})

我的问题是最后一个next(一个外部条件)总是被执行。我以为next()在被调用时停止了执行。

目前,我的解决方案是在next()条件内移动最后一个else

if(to.meta.guestOnly && isLoggedIn) {
    console.log("guestOnly")
    next({ name: 'cars' })
  } else if(to.meta.authOnly && !isLoggedIn) {
    console.log("authOnly")
    next({ name: 'login' })
  } else {
    next()
  }

为什么需要这样做,我有什么遗漏吗?

1 个答案:

答案 0 :(得分:1)

  

我认为next()在执行被调用时就停止了执行。

next()只是一个函数调用,它不会做超出语言规范的事情。它不会引发异常,因此不会停止流程。

  

我发现的所有示例都没有[a return statement after next()]

这是因为您发现的每个示例都避免了在导航卫士处理程序中多次调用next(),而这些操作与我们在JavaScript中会发现的通常逻辑一样,例如您正在使用的显式else