Vue Router 中全局前置守卫 (beforeEach) 的用法？

推荐答案

在 Vue Router 中，全局前置守卫 beforeEach 用于在路由跳转之前执行一些逻辑，比如权限验证、页面访问控制等。它的基本用法如下：

// www.javascriptcn.com code example
const router = new VueRouter({ ... });

router.beforeEach((to, from, next) => {
  // to: 即将进入的目标路由对象
  // from: 当前导航正要离开的路由对象
  // next: 必须调用该方法来 resolve 这个钩子

  if (to.meta.requiresAuth && !isAuthenticated()) {
    // 如果路由需要认证且用户未登录，则重定向到登录页面
    next('/login');
  } else {
    // 否则继续导航
    next();
  }
});

本题详细解读

1. beforeEach 的作用

beforeEach 是 Vue Router 提供的一个全局前置守卫钩子函数，它在每次路由跳转之前被调用。你可以在这个钩子中执行一些逻辑，比如检查用户是否登录、是否有权限访问某个页面等。

2. 参数说明

• to: 即将进入的目标路由对象，包含了目标路由的所有信息，比如路径、参数、元信息等。
• from: 当前导航正要离开的路由对象，包含了当前路由的所有信息。
• next: 这是一个必须调用的函数，用于决定路由跳转的行为。它可以接受以下几种参数：
  • next(): 继续导航到目标路由。
  • next(false): 中断当前导航，停留在当前页面。
  • next('/path') 或 next({ path: '/path' }): 重定向到指定的路径。
  • next(error): 导航被终止，并将错误传递给 router.onError() 注册的回调。

3. 使用场景

• 权限验证: 在用户访问某些需要登录的页面时，检查用户是否已登录，如果未登录则重定向到登录页面。
• 页面访问控制: 根据用户的角色或权限，控制用户是否可以访问某些页面。
• 数据预加载: 在路由跳转之前，预先加载一些数据，确保页面加载时数据已经准备好。

4. 注意事项

• 必须调用 next() 方法，否则路由跳转会被阻塞。
• 在 beforeEach 中可以进行异步操作，比如请求用户信息，但需要确保在异步操作完成后调用 next()。

通过合理使用 beforeEach，你可以有效地控制路由跳转的行为，提升应用的安全性和用户体验。