如何在路由器挂钩之前重定向到vue-router内的不同URL？

Question

我正在使用Vue.js 2构建管理页面，我想阻止未经身份验证的用户访问/admin路由并将其重定向到/login 。 对于我已经使用了In-组件卫队beforeRouteEnter在管理组件类似如下

...
beforeRouteEnter(to, from, next) {
  if(userNotLogedIn) {
    this.$router.push('/login');
  }
}

这里的问题是， this是不是在定义beforeRouteEnter挂钩。 那么在这种情况下访问$router并重定向到不同url的正确方法是什么？

Answer 1

文件指出：

beforeRouteEnter后卫无权访问this ，因为在确认导航之前调用了后卫，因此尚未创建新的输入组件。

你可以通过调用next来重定向到另一个页面：

beforeRouteEnter(to, from, next) {
  if(userNotLogedIn) {
    next('/login');
  }
}

以下是实现相同结果的另一种方法：因此，不是在每个受保护的路由上使用beforeRouteEnter ，而是可以使用meta属性在路由器配置中定义受保护的路由，然后在所有路由上使用beforeEach挂钩并检查受保护的路由并重定向到需要时登录页面：

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,
  // ...
})