Vuejs Router guard 工作意外

Question

我的路由器工作时出错，无法理解如何修复它。

这个全局路由器应该检查 jwt 令牌过期并处理路由。在添加 isActivated 帐户等功能之前一切正常。所以现在我需要检查用户是否有令牌以及用户帐户是否已激活。

1) 如果用户有令牌，它应该创建 next() 否则 next("/login") （重定向）

2) 如果用户有令牌但他的帐户尚未激活（第一次登录），它应该重定向到设置页面 next("/setup") 直到他提交一些信息。

所以这是我的守卫

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token");
  const tokenExp = parseInt(localStorage.getItem("tokenExp"))
  const isActivated = localStorage.getItem("isActivated")
  const now = new Date().getTime() + 129600000

  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  console.log("first")

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

    if (now > tokenExp) {
      axios.post("/user/t/r", token)
        .then(e => {
          const token = e.headers['authorization'].replace("Bearer ", "");

          localStorage.setItem("token", token);
          localStorage.setItem("tokenExp", (new Date().getTime() + 172800000).toString())

          if (isActivated === 'true') {
            next()
          } else {
            next("/setup")
          }
        })
        .catch(e => {
          localStorage.removeItem("token")
          localStorage.removeItem("tokenExp")
          localStorage.removeItem("fullName")
          localStorage.removeItem("role")
          next('/login')
        })
    } else {
      console.log("second")
      if (isActivated === 'true') {
        console.log("third")
        next();
      } else {
        console.log("fourth")
        next("/setup")
      }

    }
  } else {
    next();
  }
})

这是我的console.log，登录时出错：

Answer 1

你正在无限重定向到 /setup，你的代码首先运行命中 "fourth" 然后将用户发送到 /setup，调用之前再次是运行并且你的无限循环开始。

如果用户已经在该页面上，您需要停止调用 next('/setup') 或 next('/login')。

您需要使用 router.currentRoute 来检查您是否打算重定向到他们已经打开的页面。

https://router.vuejs.org/api/#router-currentroute

Vuejs Router guard 工作意外

Vuejs Router guard works unexpected

vue.js

vue-router

vuejs2