How to redirect to desired page in Vue js using vue-router?

Question

This is my code for requiresAuth and requiresGuest

requiresAuth : Users who satisfy this cannot go to login page or signup page ( meta for / )

requiresGuest : Users who satisfy this cannot go to / or any other page having requiresAuth meta for /login and /signup

These 2 conditions are working perfectly fine for my page

Problem :

Step-1 Lets say i have been given a url like localhost:8000/api/createapi/.......

Step-2 So currently i am not logged in, I enter the above URL and it redirects me to the log in page (which is expected)

Step-3 But when i log back in it redirects me to / (which is not ideal )

What i want :

After Step-2 When i log in it should redirect me automatically to localhost:8000/api/createapi/....... Since that was the requested URL in Step-1

router.beforeEach((to, from, next) => {    
// check for required auth guard
  if (to.matched.some(record => record.meta.requiresAuth)) {
    requiresAuthLogic(to, next, from)
  } else if (to.matched.some(record => record.meta.requiresGuest)) {
    requiresGuestLogic(to, next)
  } else {
    // Proceed to route
    next()
  }
})
function requiresAuthLogic (to:Route, next:Function) {
  // check if NOT logged in
  if (!isUserLoggedIn()) {
    // Go to login
    next({
      path: '/login',
      query: {
        redirect: to.fullPath
     }
    })
  } else if (isUserEmailVerified() === true) {
    // Proceed to route
    next()
  }
}

function requiresGuestLogic (to:Route, next:Function) {
  if (isUserLoggedIn() && isUserEmailVerified() === true) {
    next({
      path: '/',
      query: {
        redirect: to.fullPath
      }
    })
  } else {
    // Proceed to route
    next()
  }
}

RBowen · Accepted Answer · 2020-04-05 17:01:33Z

1

If I've understood correctly you need to use the value which is being passed via the redirect parameter

This should be done in your login function if login is successful, you haven't shared your login function but something like this:

loginUser() {
    this.$store.dispatch('loginUser', {
        email: this.email,
        password: this.password
    })
        .then(() => {
            this.$router.push(this.$route.query.redirect)
        })
    }

answered Apr 5, 2020 at 17:01

RBowen

3054 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ali Khan Over a year ago

Yes you understood me correctly and doing this worked like a charm... you saved me alot of time ... i thought there was something wrong with my router.ts hence did not post the login method :P

RBowen Over a year ago

Great, glad I could help :)

Collectives™ on Stack Overflow

How to redirect to desired page in Vue js using vue-router?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related