Vue Router beforeEach 没有被调用答案

【问题标题】：Vue Router beforeEach not being calledVue Router beforeEach 没有被调用
【发布时间】：2019-04-16 16:24:27
【问题描述】：

我目前在查找路由器代码中的错误时遇到了麻烦，它以前工作过，但我不知道我何时或如何破坏它。我已经签入了旧版本，但似乎没有改变。问题是，即使我从路由器中的 beforeEach Hook 中删除所有代码并仅使用 console.log() 语句，控制台中也不会打印任何内容，因此我的 auth-guard 无法正常工作。我试图根据这个更改顺序：https://forum.vuejs.org/t/router-beforeeach-if-manually-input-adress-in-browser-it-does-not-work/12461/3 但没有任何改变。

我有以下代码：

路由器/index.js

router.beforeEach = (to, from, next) => {
  console.log('he?')
  const currentUser = Firebase.auth().currentUser
  const isGold = store.getters['user/isGold']
  const requiresAuth = to.matched.some(route => route.meta.requiresAuth)
  const requiresGold = to.matched.some(route => route.meta.requiresGold)

  console.log(requiresGold, isGold, 'halloooooooo?')

  if (currentUser && to.name === 'Login') {
    next('/dashboard')
  }

  if (requiresGold && !isGold) {
    console.log('trigger')
  }

  if (requiresAuth && !currentUser) {
    next('/login')
  } else {
    next(false)
  }
}

main.js

Firebase.auth().onAuthStateChanged(user => {
  if (user) {
    const getToken = () => {
      return user.getIdToken(true).then(token => {
        store.dispatch('user/setToken', token)
      })
    }
    getToken().then(() => {
      store.dispatch('user/setUser')
      setInterval(getToken, 3540 * 1000)
    })
  }
  new Vue({
    el: '#app',
    store,
    router,
    template: '<App/>',
    components: { App }
  })

})

提前感谢您的帮助！

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

您没有分配给router.beforeEach。 router.beforeEach 是一个方法，你用函数调用它。 ^(docs) 这就是你应该如何使用路由器导航守卫：

router.beforeEach((to, from, next) => {
  console.log('he?')
  const currentUser = Firebase.auth().currentUser
  const isGold = store.getters['user/isGold']
  const requiresAuth = to.matched.some(route => route.meta.requiresAuth)
  const requiresGold = to.matched.some(route => route.meta.requiresGold)

  console.log(requiresGold, isGold, 'halloooooooo?')

  if (currentUser && to.name === 'Login') {
    next('/dashboard')
  }

  if (requiresGold && !isGold) {
    console.log('trigger')
  }

  if (requiresAuth && !currentUser) {
    next('/login')
  } else {
    next(false)
  }
});

【讨论】：