路由守卫：前置守卫和后置守卫-蒲公英云

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

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

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

本文内容

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

⭐ 专栏简介

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

在这里插入图片描述

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

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世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，