Redirect Vue Router to intended page after a user signs in

Question

I'm working on an application that blocks a user from accessing any page besides home and signup unless they are signed in. I have a catch all route guard that checks if the user is signed in when trying to access a page and redirects to the sign in if it returns false. In the sign in component, once the user signs in, they are directed to the home page. What I want to set up is when the user signs in it redirects to the last page on the app if they had previously been on a page or had typed in a direct url to a page, if not redirect to the home page. For example:

User navigates to my.app/{somePage} -> route guard check for signin returns false -> redirect to my.app/sigin -> user successfully signs in -> redirects to my.app/{somePage}

//Route Guard
router.beforeEach((to, from, next) => {
    if(!signedIn()){
        router.replace('/signin')
    }
    else{
        next()
    }
})


//Successful signin
signInSuccess(){
    //Want this to redirect to intended page if exists
    this.$router.replace('/')
}

I've tried redirecting using this.$router.go(-1) but when I redirect to the signin page in the route guard the intended route doesn't seem to get pushed into the history.

I've also tried to set up the state in my vuex store to capture the intended route and use that to redirect after sign in but the route guard seems to reload the entire page so the store state gets reset.

The only other thing I can think of is to store the intended page route in the browser localstorage but that doesn't seem like a reliable solution.

Goth

Have you tried adding the route guards to the page itself? You could then use nested routes to guard any pages that are a sub to the top page. – Footwear

I think you should use router.push instead of router.replace. See router.vuejs.org/guide/essentials/… – Penetrating

I've tried router.push and router.replace and neither worked. I think because the history gets wiped because it's a hard url redirect not vue just swapping the component in the routerview – Goth

Why not just use old plain returnURL query parameter in /signin ? – Durkin

Answer 1

Try to add

next({
    path: '/signin',
    query: { redirect: to.fullPath }
      })

instead of router.replace('/signin')

The whole guard function would be like this:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!signedIn()) {
      next({
        path: '/signin',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // make sure to always call next()!
  }
})

It's taken from the vue-router docs and it helped in my case. https://router.vuejs.org/guide/advanced/meta.html

Geehan

This is a better implementation for the route guard, but I still have the issue of once the user is at the signin page and they successfully sign in I want to redirect back to the original url they were trying to access. – Goth

It works exactly how you said in my case. Using just that: query: { redirect: to.fullPath } – Geehan

What do you put in the signInSuccess method once you're in the signin page? Instead of this.$router.replace('/') to redirect to the correct url? – Goth

Answer 2

For anyone landing here in the future, @ilnicki010's answer is correct. Once it takes you to the login page and user signs in successfully, you'll have access to router.currentRoute.value.query.redirect that you can supply to router.push() to get back to the page that the user was on.

This is according to Vue Router 4 and Vue 3.

Violetavioletta