CODEWITHSUNDEEP
vue.jsvuejs2vue-router
Dave
Dave

Reputation: 527

Vuejs Router guard works unexpected

I have router which work with errors and can't understand how to fix it.

This global router which should check jwt token expiration and handle routing. Everything worked fine before adding some functionality like isActivated account. So now I need to check if User has token and if User account is activated.

1) If user has token it should make next() otherwise next("/login") (redirect)

2) If user has token but his account is not activated yet (first time login), it should redirect on Setup page next("/setup") until he submits some information.

So this is my guard

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();
  }
})

And this is my console.log with error when I login:

enter image description here

Upvotes: 0

Views: 78

Answers (1)

Marc
Marc

Reputation: 5455

You are infinitely redirecting to /setup, You code on first run hits "fourth" then sends the user to /setup where that before call is run again and your infinite loop starts.

You need to stop calling next('/setup') or next('/login') if the user is already on that page.

You need to make use of router.currentRoute in order to check you are not going to redirect to page they are already on.

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

Upvotes: 1

Related Questions