路由守卫：前置守卫和后置守卫

我就是我 2024-04-06 15:32 89阅读 0赞

**聚沙成塔·每天进步一点点**

#### 本文内容 ####

*  ⭐ 专栏简介
 *  路由守卫：前置守卫和后置守卫
 *   *  1. 前置守卫
     *   *  使用方式
         *   *  全局前置守卫
             *  局部前置守卫
     *  2. 后置守卫
     *   *  使用方式
         *   *  全局后置守卫
     *  案例：路由跳转前后权限验证
     *  总结
 *  ⭐ 写在最后

## ⭐ 专栏简介 ##

**Vue学习之旅的奇妙世界** 欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏，让我们一同踏上更深入的 Vue学习之旅！为你的前端技能树添砖加瓦！

![在这里插入图片描述][a5e6aa42c7844913a798169ab9707994.png_pic_center]

--------------------

## 路由守卫：前置守卫和后置守卫 ##

Vue Router 提供了路由守卫（Navigation Guards），用于在路由跳转前后执行一些逻辑操作，如权限验证、页面加载提示等。路由守卫分为前置守卫和后置守卫，它们分别在路由跳转前和路由跳转后执行。

### 1. 前置守卫 ###

前置守卫用于在路由跳转前执行一些操作，例如进行权限验证或者页面加载提示。前置守卫可以阻止路由跳转，或者在跳转前执行一些异步操作。

#### 使用方式 ####

##### 全局前置守卫 #####

在 Vue Router 中，可以使用 `router.beforeEach` 注册全局前置守卫。

router.beforeEach((to, from, next) => {
        
      // 在路由跳转前执行的操作
      // 可以进行权限验证、页面加载提示等
    
      // 示例：权限验证
      if (!isAuthenticated()) {
        
        next('/login'); // 跳转到登录页
      } else {
        
        next(); // 继续路由跳转
      }
    });

##### 局部前置守卫 #####

也可以在路由配置中使用 `beforeEnter` 注册局部前置守卫。

const routes = [
      {
        
        path: '/home',
        component: Home,
        beforeEnter: (to, from, next) => {
        
          // 在路由跳转前执行的操作
          // 可以进行权限验证、页面加载提示等
    
          // 示例：页面加载提示
          showLoadingIndicator();
    
          next(); // 继续路由跳转
        }
      }
    ];

### 2. 后置守卫 ###

后置守卫用于在路由跳转后执行一些操作，例如页面的统计和日志记录等。后置守卫无法阻止路由跳转，只能在跳转后执行一些逻辑操作。

#### 使用方式 ####

##### 全局后置守卫 #####

在 Vue Router 中，可以使用 `router.afterEach` 注册全局后置守卫。

router.afterEach((to, from) => {
        
      // 在路由跳转后执行的操作
      // 可以进行页面的统计、日志记录等
    
      // 示例：页面统计
      trackPageView(to.path);
    });

后置守卫没有局部注册的方式，只能注册全局后置守卫。

### 案例：路由跳转前后权限验证 ###

// main.js
    
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import App from './App.vue';
    
    Vue.use(VueRouter);
    
    const router = new VueRouter({
        
      routes: [
        // 路由配置
      ]
    });
    
    // 全局前置守卫：权限验证
    router.beforeEach((to, from, next) => {
        
      if (to.meta.requiresAuth && !isAuthenticated()) {
        
        next('/login');
      } else {
        
        next();
      }
    });
    
    new Vue({
        
      el: '#app',
      router,
      render: h => h(App)
    });

### 总结 ###

*  **前置守卫：** 在路由跳转前执行，用于权限验证、页面加载提示等操作。
 *  **后置守卫：** 在路由跳转后执行，用于页面统计、日志记录等操作。
 *  使用路由守卫可以增强应用的控制和用户体验，使得路由跳转的过程更加灵活和可控。

--------------------

## ⭐ 写在最后 ##

欢迎来到《Vue技能树专栏》！本专栏旨在帮助您全面深入地掌握Vue.js，一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者，这里都将为您提供详细的指导、实用的技巧以及深入的理解，助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，

[a5e6aa42c7844913a798169ab9707994.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5e6f4a1f64264e8b936679f67f856882.png