CODEWITHSUNDEEP
javascriptnode.jsvue.jsvue-router
Ali Khan
Ali Khan

Reputation: 134

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

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

Upvotes: 0

Views: 185

Answers (1)

RBowen
RBowen

Reputation: 305

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

Upvotes: 1

Related Questions