How to redirect to a different url inside the vue-router beforeRouteEnter hook?
The documentation states that:
The
beforeRouteEnter
guard does NOT have access tothis
, because the guard is called before the navigation is confirmed, thus the new entering component has not even been created yet.
You can redirect to another page by calling next
like this:
beforeRouteEnter(to, from, next) {
if(userNotLogedIn) {
next('/login');
}
}
Here is another way to accomplish the same result: So instead of using beforeRouteEnter
on each protected route, you could define protected routes in your router configuration using a meta
property, then use beforeEach
hook on all the routes and check for protected routes and redirect to login page when needed:
let router = new Router({
mode: 'history',
routes: [
{
path: '/profile',
name: 'Profile',
component: Profile,
meta: {
auth: true // A protected route
},
},
{
path: '/login',
name: 'Login',
component: Login, // Unprotected route
},
]
})
/* Use this hook on all the routes that need to be protected
instead of beforeRouteEnter on each one explicitly */
router.beforeEach((to, from, next) => {
if (to.meta.auth && userNotLoggedIn) {
next('/login')
}
else {
next()
}
})
// Your Vue instance
new Vue({
el: '#app',
router,
// ...
})
Related videos on Youtube
Abdelaziz Mokhnache
Updated on October 21, 2020Comments
-
Abdelaziz Mokhnache over 3 years
I am building an admin page with Vue.js 2 and I want to prevent unauthenticated users from accessing the
/admin
route and redirect them to/login
. For that I have used the In-Component GuardbeforeRouteEnter
in the Admin component like follows... beforeRouteEnter(to, from, next) { if(userNotLogedIn) { this.$router.push('/login'); } }
The problem here is that
this
is not defined inbeforeRouteEnter
hook. So what's the proper way to access$router
and redirect to a different url in this case ? -
b00sted 'snail' over 5 yearsWith this solution, u can navigate with browser arrows and see protected route component information after user logout :/
-
Ikbel over 5 years@nrkz once logged in and when you want to forward the user, you should replace the login route in the history instead of pushing a new route.