Question

187

How to redirect to a different url inside the vue-router beforeRouteEnter hook?

rated 0 times [ 190] [ 3] / answers: 1 / hits: 28728 / 7 Years ago, tue, august 15, 2017, 12:00:00

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 Guard beforeRouteEnter 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 in beforeRouteEnter hook. So what's the proper way to access $router and redirect to a different url in this case ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nathanaelzechariahl

Add To Favorites

Follow

Total Points: 745

Total Questions: 86

Total Answers: 103

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

answered 7 Years ago kinsley · Accepted Answer

The documentation states that:

The beforeRouteEnter guard does NOT have access to this, 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,

  // ...

})