(四十七)Vue Router之路由守卫

文章目录

  • 概念
  • 全局路由守卫
    • 全局前置守卫
    • 全局解析守卫
    • 全局后置路由守卫
  • 独享路由守卫
  • 组件内的守卫
    • beforeRouteEnter
    • beforeRouteUpdate
    • beforeRouteLeave
  • 完整的导航解析流程

上一篇:(四十六)Vue Router组件所独有的两个钩子activate、deactivated

概念

路由守卫是在前端应用中用于控制和管理路由导航的机制。它们允许开发人员在路由导航事件发生之前或之后执行一些逻辑。

路由守卫可以用于实现以下功能:

  • 身份验证:通过在路由导航之前检查用户的身份验证状态,可以防止未经授权的用户访问受保护的页面。如果用户未登录或没有足够的权限,可以重定向到登录页面或显示适当的提示信息。
  • 授权:除了身份验证外,路由守卫还可以检查用户是否具有足够的权限访问某个页面或执行某个操作。如果用户权限不足,可以阻止导航或采取其他适当的措施。
  • 数据预加载:在加载某个路由之前,可以使用路由守卫来预加载所需的数据。这可以提高用户体验,减少页面加载时间,并确保页面所需的数据在渲染之前已经准备好。

全局路由守卫

全局路由守卫是应用于整个路由系统的守卫机制。它们会在每次路由导航事件发生时触发,并允许开发人员执行一些全局级别的逻辑。

每个守卫方法接收三个参数:

  • to: Route:即将要进入的目标 路由对象
  • from: Route:当前导航正要离开的路由
  • next: Function::一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    • next()::进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from 路由对应的地址。
    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    • next(error)::(2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。
这里有一个在用户未能验证身份时重定向到 /login 的示例:

// BAD
router.beforeEach((to, from, next) => {if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })// 如果用户未能验证身份,则 `next` 会被调用两次next()
})
// GOOD
router.beforeEach((to, from, next) => {if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })else next()
})

全局路由守卫分类:

  • 全局前置路由守卫
  • 全局解析路由守卫
  • 全局后置路由守卫

执行顺序:

  • 全局前置路由守卫 (beforeEach)按照注册顺序执行。
  • 解析路由守卫 (beforeResolve)按照注册顺序执行。
  • 路由组件实例化和渲染。
  • 全局后置路由守卫 (afterEach)按照注册顺序执行。

全局前置守卫

当一个导航触发时,初始化的时候和每次路由切换之前调用,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中
你可以使用 router.beforeEach 注册一个全局前置守卫:

const router = new VueRouter({ ... })//全局前置路由守卫---初始化的时候和每次路由切换之前调用
router.beforeEach((to, from, next) => {// ...
})

全局解析守卫

全局解析守卫是一个在路由导航之前触发的守卫机制,用于在路由进入组件之前预加载所需的数据。它可以在整个路由系统中应用,确保数据在组件渲染之前已经准备好。

const router = new VueRouter({ ... })router.beforeResolve((to, from, next) => {// 在路由导航之前触发,可以执行解析逻辑或其他操作// 在这里可以预加载数据或执行其他全局级别的处理next(); // 确保继续路由导航
});

全局后置路由守卫

全局后置路由守卫是Vue Router中的一种路由守卫,用于在路由导航完成后执行一些操作。它可以用于记录页面访问日志、执行统计分析或其他需要在路由导航后进行的全局级别处理。

和其他守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身:

const router = new VueRouter({ ... })//全局后置路由守卫---初始化的时候和每次路由切换之后被调用
router.afterEach((to, from) => {// 在路由导航完成后触发,可以执行一些操作// 在这里可以记录页面访问日志、执行统计分析或其他全局级别的处理
});

独享路由守卫

在Vue Router中,你可以使用全局独享路由守卫来为特定的路由配置独立的守卫。全局独享路由守卫提供了更细粒度的控制,可以在特定路由上执行一些操作或验证逻辑。全局独享路由守卫可以通过在路由配置中的beforeEnter字段中定义一个守卫函数来实现。

const router = new VueRouter({routes: [{path: '/xxx',component: xxx,beforeEnter: (to, from, next) => {// 在进入路由之前触发,可以执行一些操作或验证逻辑// 在这里可以进行身份验证或其他特定路由级别的处理next(); // 确保继续路由导航}},// 其他路由配置...]
});

组件内的守卫

可以在组件内部定义路由守卫,以便在特定组件中执行相关的操作或验证逻辑。这种类型的守卫被称为组件内的路由守卫(Component Guard)。Vue Router提供了以下几种组件内的路由守卫:

  • beforeRouteEnter:在进入路由之前被调用。它在组件实例被创建之前被调用,因此在该守卫中无法直接访问组件实例this
  • beforeRouteUpdate(2.2 新增):在当前路由改变,但是该组件被复用时调用。它可以用于响应路由参数的变化,以及在组件复用时执行一些逻辑。可以访问组件实例 this
  • beforeRouteLeave:在离开当前路由之前被调用。可以用于确认是否离开当前页面、保存表单等操作。可以访问组件实例 this

beforeRouteEnter

beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {next(vm => {// 通过 `vm` 访问组件实例})
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdatebeforeRouteLeave 来说,this 已经可用了,所以不支持传递回调,因为没有必要了。

beforeRouteUpdate

在当前路由改变,但是该组件被复用时调用,举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

beforeRouteUpdate (to, from, next) {// 可以使用 `this`
}

beforeRouteLeave

导航离开该组件的对应路由时调用

beforeRouteLeave(to, from, next) {// 可以访问组件实例 `this`
}

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/38771.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VLAN原理与配置

AUTHOR :闫小雨 DATE:2024-04-28 目录 VLAN的三种端口类型 VLAN原理 什么是VLAN 为什么使用VLAN VLAN的基本原理 VLAN标签 VLAN标签各字段含义如下: VLAN的划分方式 VLAN的划分包括如下5种方法: VLAN的接口链路类型 创建V…

Android system.img挂载和解除挂载

Android system.img挂载和解除挂载 解包后的super.img,里面最重要的是system.img文件,如何对system.img进行挂载和解除挂载是需要掌握的能力 基础知识 system.img、vendor.img 都存在两种格式raw,sparse ,在ubuntu命令窗口下执行下执行&am…

深度学习之生成对抗网络 BigGAN

BigGAN(Big Generative Adversarial Networks)是生成对抗网络(GAN)的一种变体,专注于生成高质量、大尺寸的图像。BigGAN 是由 DeepMind 的研究人员于 2018 年提出的。其核心思想是通过增加模型的规模(更深的网络和更多的参数)来提高生成图像的质量,同时引入一些新的技术…

便签 Pro(Mac 智能便签工具)专业版怎么样,值得购买吗?

使用 Mac 的小伙伴平时都是怎么记录工作生活中的碎片信息?用聊天软件,还是系统备忘录呢? 实际体验下来,其实都难以称得上好用。 赶紧来了解一下 Mac 多彩思维速记工具便签 Pro!拥有智能边框大小、iCloud 同步、历史记…

矩阵置零解题

给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1: 输入:matrix [[1,1,1],[1,0,1],[1,1,1]] 输出:[[1,0,1],[0,0,0],[1,0,1]]示例 2: 输入&…

VUE3解决跨域问题

本文基于vue3 vite element-plus pnpm 报错:**** has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. 原因:前端不能直接访问其他IP,需要用vite.config.ts &#xff0…

onvif 基本概念

media_server、device_server和event_server是三个重要的服务。 1. media_server 功能:media_server服务主要负责处理媒体流相关的请求,包括视频和音频流的传输、控制等。实现:该服务通常使用RTSP(Real Time Streaming Protocol…

API-本地存储

学习目标: 掌握本地存储 学习内容: 本地存储介绍本地存储分类存储复杂数据类型 本地存储介绍: 以前我们页面写的数据一刷新页面就没有了,是不是? 随着互联网的快速发展,基于网页的应用越来越普遍,同时也…

算法基础入门 - 2.栈、队列、链表

文章目录 算法基础入门第二章 栈、队列、链表2.1 队列2.2 栈2.3 纸牌游戏2.4 链表如何建立链表?1.我们需要一个头指针(head)指向链表的初始。链表还没建立时头指针head为空2.建立第一个结点3.设置刚创建的这个结点的数据域(左半)和指针域(右半)4.设置头指针,头指针可方便…

【鸿蒙学习笔记】运算符

官方文档&#xff1a;ArkTS语言介绍 目录标题 赋值运算符比较运算符一元运算符&#xff1a;自增自减运算符二元运算符位运算符逻辑运算符 赋值运算符 运算符解释解释赋值运算符x x y加-x x - y减*x x * y乘/x x / y除%x x % y取余<<x x << y按位左移>&…

问题-小技巧-专业版Win11怎么启动电脑的休眠模式?

专业版Win11怎么启动电脑的休眠模式&#xff1f; powercfg -a powercfg -hibernate on 启用管理员面板依次输入上述命令就可以了。

宠物医院管理系统-计算机毕业设计源码07221

目 录 1 绪论 1.1 选题背景和意义 1.2国内外研究现状 1.3论文结构与章节安排 2 宠物医院管理系统系统分析 2.1 可行性分析 2.1.1技术可行性分析 2.1.2 操作可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分…

【python爬虫】总结反反爬的技巧

1. 当请求失败时重复请求 def get_url(url):try:response requests.get(url, timeout10) # 超时设置为10秒except:for i in range(10): # 循环去请求网站response requests.get(url, proxiesproxies, timeout20)if response.status_code 200:breakreturn response2. 适当…

C++ 教程 - 09 多线程处理

文章目录 thread标准库pthread库 thread标准库 C 11 后添加了新的标准线程库 std::thread 类&#xff0c;需引入头文件<thread>声明即创建线程对象&#xff0c;如 thread th1&#xff1b; 调用无参构造&#xff0c;生成一个空的线程对象&#xff1b;thread th(callable&…

VL31N BAPI:GN_DELIVERY_CREATE创建内向交货单同时批次拆分

翻到之前写的测试代码&#xff0c;记录一下&#xff0c;用于创建DN的同时就进行批次拆分&#xff0c;不需要再调用变更的BAPI再去修改一次。 REPORT ZTEST_VL31N_BATCH_SPLIT.DATA:GS_VBSK_I TYPE VBSK, "構造:販売伝票ヘッダINGS…

2023-2024华为ICT大赛中国区 实践赛云赛道 全国总决赛 理论部分真题

Part 1 大数据模块(3题)&#xff1a; 1、以下关于特征选择中的互信息法描述中&#xff0c;理解正确的是哪些?(多选题) A.互信息法是从信息熵的角度分析特征和输出值之间的关系评分 B.在Python工具的sklearn模块中&#xff0c;可使用mutual_info_classif(分类)和mutual_info…

AI智能在Type-C领域的应用

随着科技的飞速发展&#xff0c;Type-C接口凭借其卓越的性能和广泛的应用场景&#xff0c;已成为现代电子设备中不可或缺的一部分。而AI智能技术的兴起&#xff0c;为Type-C领域带来了革命性的变革&#xff0c;推动了其功能的进一步完善和应用领域的拓展。本文将探讨AI智能在Ty…

用技术手段有效应对CC攻击

在网络安全领域&#xff0c;CC攻击&#xff08;Challenge Collapsar&#xff0c;即HTTP Flood攻击的一种&#xff09;是一种常见的分布式拒绝服务&#xff08;DDoS&#xff09;攻击手段&#xff0c;它通过大量合法的HTTP请求耗尽服务器资源&#xff0c;导致正常用户访问缓慢甚至…

【cocos2dx】【c++】【游戏开发】旧题新说,计算两个日期相差几天,在指定的天数弹出相应的弹窗

【cocos2dx】【c】计算两个日期相差几天&#xff0c;在指定的天数弹出相应的弹窗 设备/引擎&#xff1a;Mac&#xff08;11.6&#xff09;/Mac Mini 开发工具&#xff1a;Xcode&#xff08;15.0.1&#xff09; 开发需求&#xff1a;计算两个日期相差几天&#xff0c;在指定的…

中文翻译老挝语只推荐一个神器《老挝语翻译通》App,老挝语口语发音练习,支持老挝文OCR识别提取文字!

出国旅游去探索东南亚的神秘国家&#xff1a;老挝&#xff0c;不会老挝语怎么办&#xff1f;不用怕&#xff0c;下载《老挝语翻译通》App帮助你把中文翻译成老挝语。 功能亮点&#xff1a; 实时翻译&#xff1a;实时把中文翻译成老挝语&#xff0c;老挝语单词或者句子均可均可…