Vue路由守卫配置详解与实战

Vue.js路由守卫是Vue应用中实现页面权限控制、访问统计等功能的关键技术。本文深入解析Vue路由守卫的配置方法和使用技巧，助你打造更安全、更完善的Web应用。文章详细介绍了全局前置守卫`router.beforeEach`、全局解析守卫`router.beforeResolve`、全局后置钩子`router.afterEach`以及组件内守卫（`beforeRouteEnter`、`beforeRouteUpdate`、`beforeRouteLeave`）的用法，并针对异步路由守卫和避免无限循环等常见问题提供了解决方案。掌握这些技巧，你将能够灵活运用Vue路由守卫，实现精细化的路由控制，提升用户体验。同时，本文还梳理了路由守卫的执行顺序，帮助开发者更好地理解路由跳转的生命周期。

Vue.js路由守卫用于在路由跳转前后执行控制逻辑，如权限验证和页面统计。1. 全局前置守卫router.beforeEach在每次路由跳转前执行，可用于检查用户是否登录并决定是否允许访问目标路由；2. 全局解析守卫router.beforeResolve在组件内守卫和异步路由组件解析完成后调用，适合进行数据预取操作；3. 全局后置钩子router.afterEach在路由跳转完成后执行，通常用于页面访问统计；4. 组件内守卫包括beforeRouteEnter（进入组件前调用，无法访问this）、beforeRouteUpdate（组件复用时调用，可访问this）和beforeRouteLeave（离开组件时调用，可访问this），它们分别在不同场景下触发；处理异步路由守卫时需使用Promise或async/await确保next()在异步操作完成后调用；为避免无限循环，应合理设计重定向条件，确保最终能跳出循环；组件内守卫的执行顺序依次是beforeRouteLeave、beforeRouteUpdate（若适用）、beforeRouteEnter，而全局守卫的顺序是beforeEach → beforeRouteLeave → beforeResolve → beforeRouteUpdate → beforeRouteEnter → afterEach。

Vue.js路由守卫主要用于在路由跳转前后进行一些控制，比如权限验证、页面访问统计等。它通过一系列钩子函数，让你可以在路由跳转的不同阶段执行自定义逻辑。

配置Vue.js路由守卫，主要围绕 router.beforeEach、router.beforeResolve 和 router.afterEach 这三个全局守卫，以及组件内的路由守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）展开。

解决方案

1. 全局前置守卫 (router.beforeEach)

   

   这是最常用的守卫，在每次路由跳转前执行。

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Home from '../components/Home.vue'
   import About from '../components/About.vue'
   
   Vue.use(VueRouter)
   
   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About, meta: { requiresAuth: true } } // 需要权限的路由
   ]
   
   const router = new VueRouter({
     routes
   })
   
   router.beforeEach((to, from, next) => {
     // 假设你有一个验证用户是否登录的函数
     const isLoggedIn = () => {
       // 这里替换成你的实际验证逻辑，比如检查localStorage
       return localStorage.getItem('token') !== null;
     };
   
     if (to.matched.some(record => record.meta.requiresAuth)) {
       // 这个路由需要登录才能访问
       if (!isLoggedIn()) {
         // 如果没有登录，重定向到登录页面
         next({
           path: '/login',
           query: { redirect: to.fullPath } // 将要访问的页面路径传递给登录页面，方便登录后跳转
         });
       } else {
         next(); // 允许访问
       }
     } else {
       next(); // 确保一定要调用 next()
     }
   });
   
   export default router

   这里，to 是目标路由对象，from 是当前路由对象，next 是一个函数，必须调用它来resolve这个钩子。next() 允许路由跳转，next(false) 中断当前导航，next('/login') 重定向到另一个路由。

   注意 to.matched 用于检查目标路由是否匹配任何需要权限的路由记录。meta.requiresAuth 是你在路由配置中定义的自定义元数据，用于标记哪些路由需要登录。

2. 全局解析守卫 (router.beforeResolve)

   和 beforeEach 类似，区别是在所有组件内守卫和异步路由组件被解析之后，导航被确认之前调用。

   router.beforeResolve((to, from, next) => {
     //  可以在这里进行一些数据预取操作，确保在组件渲染前数据准备就绪
     //  例如，从服务器获取一些全局配置
     next();
   });

3. 全局后置钩子 (router.afterEach)

   在路由跳转完成后执行，没有 next 函数，所以不能改变导航。

   router.afterEach((to, from) => {
     // 页面访问统计
     console.log(`Navigated to ${to.path} from ${from.path}`);
     // 可以调用第三方统计服务，例如 Google Analytics
   });

4. 组件内的路由守卫

   这些守卫直接定义在组件内部，可以访问组件实例 (this)。

   • beforeRouteEnter: 不能访问 this，因为在守卫执行前，组件实例还没有被创建。但是，你可以通过 next 的回调函数来访问组件实例。

     beforeRouteEnter (to, from, next) {
       next(vm => {
         // 通过 `vm` 访问组件实例
         console.log('Component instance:', vm);
       })
     }

   • beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用。可以访问组件实例 this。

     beforeRouteUpdate (to, from, next) {
       // 例如，当路由参数改变时，重新获取数据
       this.getData(to.params.id);
       next();
     }

   • beforeRouteLeave: 在离开当前路由时调用。可以访问组件实例 this。

     beforeRouteLeave (to, from, next) {
       const answer = window.confirm('确定要离开此页面吗？')
       if (answer) {
         next()
       } else {
         next(false)
       }
     }

如何处理异步路由守卫？

异步路由守卫是指在路由守卫中需要执行异步操作的情况，例如从服务器获取数据。处理异步路由守卫的关键在于正确使用 next 函数，并确保在异步操作完成后再调用 next。

router.beforeEach((to, from, next) => {
  // 模拟异步操作
  const fetchData = () => {
    return new Promise(resolve => {
      setTimeout(() => {
        const data = { authenticated: true }; // 假设从服务器获取的数据
        resolve(data);
      }, 500);
    });
  };

  fetchData().then(data => {
    if (to.meta.requiresAuth && !data.authenticated) {
      next('/login');
    } else {
      next();
    }
  });
});

这里，fetchData 函数模拟一个异步操作，例如从服务器获取用户认证信息。在 fetchData 的 then 回调中，我们根据获取到的数据判断用户是否已认证，并决定是否允许路由跳转。关键在于，next() 函数必须在 then 回调中调用，以确保在异步操作完成后再进行路由控制。

如何避免路由守卫中的无限循环？

路由守卫中的无限循环通常发生在重定向逻辑不当的情况下，例如在 beforeEach 守卫中，如果无论什么情况都重定向到同一个路由，就会导致无限循环。

避免无限循环的关键在于仔细设计重定向逻辑，确保重定向只在特定条件下发生，并且最终能够跳出循环。

router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('token') !== null;

  if (to.path === '/login' && isLoggedIn) {
    // 如果用户已经登录，并且访问的是登录页面，则重定向到首页
    next('/');
  } else if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn) {
    // 如果用户未登录，并且访问的是需要登录的页面，则重定向到登录页面
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    });
  } else {
    next();
  }
});

在这个例子中，我们添加了一个额外的判断条件：如果用户已经登录，并且访问的是登录页面，则重定向到首页。这样可以避免用户在已经登录的情况下，仍然被重定向到登录页面，从而导致无限循环。

组件内路由守卫的执行顺序是什么？

组件内路由守卫的执行顺序对于理解路由跳转的整个过程至关重要。

1. beforeRouteLeave: 离开的组件的守卫，在离开当前路由时被调用。
2. beforeRouteUpdate: 当前组件复用时调用，例如，动态路由参数改变时。
3. beforeRouteEnter: 进入的组件的守卫，在进入新的路由时被调用。

全局守卫 (beforeEach, beforeResolve, afterEach) 的执行顺序如下：

1. router.beforeEach: 全局前置守卫，在任何路由跳转前被调用。
2. 组件内的 beforeRouteLeave: 离开组件的离开守卫。
3. router.beforeResolve: 全局解析守卫，在组件内的守卫和异步路由组件被解析之后被调用。
4. 组件内的 beforeRouteUpdate: 如果是同一组件复用，则执行 beforeRouteUpdate。
5. 组件内的 beforeRouteEnter: 进入组件的进入守卫。
6. router.afterEach: 全局后置钩子，在路由跳转完成后被调用。

理解这些守卫的执行顺序可以帮助你更好地控制路由跳转的行为，并在不同的阶段执行相应的逻辑。

本篇关于《Vue路由守卫配置详解与实战》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！