vue.js - Vuejs 路由器防护工作意外

Question

我的路由器有错误，无法理解如何修复它。

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

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

2）如果用户有令牌但他的帐户尚未激活（第一次登录），它应该重定向到设置页面下一步（“/ 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：

标签： vue.jsvuejs2vue-router

Answer 1

您无限重定向到 /setup，您在第一次运行时编写代码点击“第四次”，然后将用户发送到 /setup，在此之前再次运行调用并开始无限循环。

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

您需要使用 router.currentRoute 来检查您不会重定向到他们已经在的页面。

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