javascript - Redirect Vue Router to intended page after a user signs in - Stack Overflow

admin管理员组

文章数量:1287655

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 ponent, 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.

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 ponent, 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.

• javascript
• vue.js
• vue-router
• html5-history

Share Improve this question Follow asked Jan 10, 2020 at 17:56 DavidDavid 41511 gold badge77 silver badges1414 bronze badges 4

• 1 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. – jacstrong Commented Jan 10, 2020 at 18:40
• 1 I think you should use router.push instead of router.replace. See router.vuejs/guide/essentials/… – User 28 Commented Jan 10, 2020 at 19:20
• 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 ponent in the routerview – David Commented Jan 10, 2020 at 19:39
• 1 Why not just use old plain returnURL query parameter in /signin ? – Michal Levý Commented Jan 10, 2020 at 20:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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/guide/advanced/meta.html

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.

本文标签： javascriptRedirect Vue Router to intended page after a user signs inStack Overflow