如何在 vue-router beforeRouteEnter 钩子中重定向到不同的 url？

Posted 2023-02-22

【中文标题】如何在 vue-router beforeRouteEnter 钩子中重定向到不同的 url？

【英文标题】：How to redirect to a different url inside the vue-router beforeRouteEnter hook?

【发布时间】：2018-01-23 21:22:22

【问题描述】：

我正在使用 Vue.js 2 构建一个管理页面，我想防止未经身份验证的用户访问 /admin 路由并将他们重定向到 /login。为此，我在 Admin 组件中使用了 In-Component Guard beforeRouteEnter，如下所示

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

这里的问题是this 没有在beforeRouteEnter 钩子中定义。那么在这种情况下访问$router 并重定向到不同的网址的正确方法是什么？

【参考方案1】：

documentation 声明：

beforeRouteEnter 守卫无权访问this，因为 在导航确认之前调用guard，因此新的 输入组件还没有被创建。

您可以像这样调用next 重定向到另一个页面：

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

这是实现相同结果的另一种方法：因此，您可以在路由器配置中使用 meta 属性定义受保护路由，而不是在每个受保护路由上使用 beforeRouteEnter，然后在所有受保护路由上使用 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,
  // ...
)

【讨论】：

使用此解决方案，您可以使用浏览器箭头导航并在用户注销后查看受保护的路由组件信息：/

@nrkz 登录后，当你想转发用户时，你应该替换历史中的登录路由，而不是推送新的路由。