I have a route. If the user is not logged in it redirects them to the login page. I am trying to grab the route the user came from so I can redirect them back after they have logged in.

Here is my route:

{
  path: '/builder/:pin?',
  name: 'Builder',
  ponent: Builder,
  props: true,
  meta: {
    requiresAuth: true, roles: ['XXXX', 'XXXX', 'XXXX']
  }
}

router.beforeEach((to, from, next) => {
  // check to see if router requires auth
  if (to.meta.requiresAuth) {
    let user = store.getters.getUser
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        if(!user.emailVerified) {
          next({ name: 'Login' })
          store.dispatch('setLoginFeedback', {code: 'resubmit-verification', message: 'Your email is not verified'})
          return
        }
        // get current user
        let ref = db.collection('users').where('email', '==', user.email)
        ref.get().then(snapshot => {
          if (!snapshot.empty) {
            snapshot.forEach(doc => {
              this.user = doc.data()
              // if no roles are set
              if(!to.meta.roles) {
                next()
              } else if(to.meta.roles) {
                const hasRole = this.user.roles.find(val => to.meta.roles.includes(val))
                if (hasRole) {
                  next()
                } else {
                  alert('you do not have permission to enter')
                }
              } else {
                // next({ name: 'Dashboard' })
              }

            })
          } else {
            // no user
            // if (!this.user) {
              next({ name: 'Login' })
            // }
          }
        })
      } else {
        next({ name: 'Login' })
      }
    })
  } else {
    // console.log('does not require auth')
    next()
  }


})

In my Login ponent I have this code:

beforeRouteEnter(to, from, next) {
    next((vm) => {
        vm.prevRoute = from;
    });
    console.log(to, from, next)
},

I am currently on a local server. When I go to localhost:8080/builder it redirects me to the Login properly but in the console. I get this for the From

{name: null, meta: {}, path: "/", hash: "", query: {}, …}

Why am I not getting /builder in the path?

I have a route. If the user is not logged in it redirects them to the login page. I am trying to grab the route the user came from so I can redirect them back after they have logged in.

Here is my route:

{
  path: '/builder/:pin?',
  name: 'Builder',
  ponent: Builder,
  props: true,
  meta: {
    requiresAuth: true, roles: ['XXXX', 'XXXX', 'XXXX']
  }
}

router.beforeEach((to, from, next) => {
  // check to see if router requires auth
  if (to.meta.requiresAuth) {
    let user = store.getters.getUser
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        if(!user.emailVerified) {
          next({ name: 'Login' })
          store.dispatch('setLoginFeedback', {code: 'resubmit-verification', message: 'Your email is not verified'})
          return
        }
        // get current user
        let ref = db.collection('users').where('email', '==', user.email)
        ref.get().then(snapshot => {
          if (!snapshot.empty) {
            snapshot.forEach(doc => {
              this.user = doc.data()
              // if no roles are set
              if(!to.meta.roles) {
                next()
              } else if(to.meta.roles) {
                const hasRole = this.user.roles.find(val => to.meta.roles.includes(val))
                if (hasRole) {
                  next()
                } else {
                  alert('you do not have permission to enter')
                }
              } else {
                // next({ name: 'Dashboard' })
              }

            })
          } else {
            // no user
            // if (!this.user) {
              next({ name: 'Login' })
            // }
          }
        })
      } else {
        next({ name: 'Login' })
      }
    })
  } else {
    // console.log('does not require auth')
    next()
  }


})

In my Login ponent I have this code:

beforeRouteEnter(to, from, next) {
    next((vm) => {
        vm.prevRoute = from;
    });
    console.log(to, from, next)
},

I am currently on a local server. When I go to localhost:8080/builder it redirects me to the Login properly but in the console. I get this for the From

{name: null, meta: {}, path: "/", hash: "", query: {}, …}

Why am I not getting /builder in the path?

• javascript
• vue.js
• vuejs2
• vuex
• vue-router

• Can you add the code you are using for the redirect? – Eder Díaz Commented Aug 30, 2019 at 4:11
• @EderChrono sure, I just added it – Jason Commented Aug 30, 2019 at 4:13

3 Answers 3

You could just do this..

this.$router.back();

This will take you back to the previous route

Programmatic Navigation | Vue Router https://router.vuejs/guide/essentials/navigation.html

It seems that the next({ name: 'Login' }) call you use to redirect to the login page doesn't modify the from attributes. That is because you are "internally" routing, it is different from making a router.push call.

Probably the easiest way to do this kind of redirect is by using a query param:

next({
  name: "bar",
  query: { redirect: to.fullPath }
});

Then access it either in your ponent $route.query.redirect or in a router navigation guard from.query.redirect.

To go back the previous route you can use

this.$router.go(-1)

vue maintains history of previous visited routes.

-1 mean go back one record.

see https://router.vuejs/guide/essentials/navigation.html#router-go-n