I have a specific route set up in my application. If the user is not logged in, they are redirected to the login page. I am currently working on capturing the previous route that the user came from so that I can redirect them back there after they have successfully logged in.
Here is the structure of my route:
{
path: '/builder/:pin?',
name: 'Builder',
component: Builder,
props: true,
meta: {
requiresAuth: true, roles: ['XXXX', 'XXXX', 'XXXX']
}
}
router.beforeEach((to, from, next) => {
// Check if the route requires authentication
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()
// Check for roles
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 found
// if (!this.user) {
next({ name: 'Login' })
// }
}
})
} else {
next({ name: 'Login' })
}
})
} else {
// console.log('Does not require authentication')
next()
}
})
Within my Login component, I have included the following code snippet:
beforeRouteEnter(to, from, next) {
next((vm) => {
vm.prevRoute = from;
});
console.log(to, from, next)
},
I am currently running my application on a local server. When I navigate to localhost:8080/builder, it correctly redirects me to the Login page, but in the console, the 'From' value appears as follows:
{name: null, meta: {}, path: "/", hash: "", query: {}, …}
I am wondering why I am not getting /builder as the path in the 'From' object?