NUXT3学习日记四(路由中间件、导航守卫)
前言
在 Nuxt 3 中,中间件(Middleware)是用于在页面渲染之前或导航发生之前执行的函数。它们允许你在路由切换时执行逻辑,像是身份验证、重定向、权限控制、数据预加载等任务。中间件可以被全局使用,也可以只在特定页面或布局中使用。
中间件必须在文件夹middleware中,在这个middleware文件夹中创建js文件
中间件的作用
- 身份验证:用于检查用户是否登录或是否有权限访问某些页面。
- 重定向:根据条件自动重定向用户到另一个页面。
- 条件加载数据:在路由切换前加载或检查数据。
- 页面控制:控制哪些页面可以访问,哪些不能。
- 日志记录:记录访问的路径、时间等信息。
普通中间件
以下就是一个中间件代码:
middleware/my.jsexport default defineNuxtRouteMiddleware((to, from) => {console.log(to.path)if (to.path === '/about') {console.log('www');//必须加return,否则不能跳转return navigateTo('/login')//返回true这放行,后面的中间件也会执行// return true}
})
在这段代码中,to是去哪,from是从哪里来。
另外这里提醒一下,拦截跳转路由记得需要加上return,否则跳转不起作用。
在vue文件中使用中间件,两种方式,一种是单独提出来在middleware文件夹中定义中间件,另外一种就是在vue文件中直接定义。
这里我推荐官方的第一种,在middleware文件夹中定义中间件:
//about.vue<template><div></div>
</template><script setup>
definePageMeta({/*** 路由中间件1*/middleware:['my']/*************************************************//*** 路由中间件2*/// middleware:[// function(to,from){// console.log(to.path);// }// ]
});
</script><style scoped>
</style>
注意!!! 这里middleware是个数组,在middleware文件夹中定义的js文件名字就是数组的元素。
例如:


那么有多个中间件,执行顺序是什么样的呢?
这里就按照数组中元素的顺序执行中间件
下面来验证一下
我们修改一下my.js中的代码:
export default defineNuxtRouteMiddleware((to, from) => {console.log(to.path)if (to.path === '/about') {//返回true这放行,后面的中间件也会执行return true}
})
这里如果想要让后续的中间件起作用,我们需要return一个true。
这里如果return的是false,服务端渲染就会返回404。
my_two.js中的代码:
export default defineNuxtRouteMiddleware((to, from) => {console.log(to.path)if (to.path === '/about') {//必须加return,否则不能跳转return navigateTo('/login')}
})
下面请看输出结果:

可以看出先执行my.js中的代码,然后执行my_two.js中的代码。
全局中间件
注意,全局中间件的文件名必须以‘global.js’结尾,例如test.global.js文件。
我们的全局中间件直接编写不用我们自己去引入就可以起作用。
如果middleware文件夹中有多个全局中间件,根据文件名ascll(阿斯克码)从小到大排序执行。
//全局中间件,拦截所有的请求,所以在about.vue中先输出“/about”,
//跳转到login.vue中输出“/login”//如果有多个全局中间件,根据ascll(阿斯克码)从小到大排序执行
export default defineNuxtRouteMiddleware((to, from) => {console.log(to.path)if (to.path === '/about') {return navigateTo('/login')}
})
输出结果为:

这里呢,我们首先跳转到about页面,被全局中间件进行拦截,紧接着进入到login页面再次被拦截,所以先输出/about再输出/login。
全局路由守卫
此时在客户端跳转没有问题,在服务端渲染报500错误,因为服务端没有token或ElMessage。
在之后会使用pinia进行解决,本章先看其他办法。
//全局中间件,拦截所有的请求,所以在about.vue中先输出“/about”,
//跳转到login.vue中输出“/login”//如果有多个全局中间件,根据ascll(阿斯克码)从小到大排序执行
export default defineNuxtRouteMiddleware((to, from) => {/*** 路由守卫*///此时访问客户端正常执行//直接访问服务端,报500错误,因为没有tokenlet passURL = ['/','/login','/about','/index']if (!passURL.includes(to.path)) {let token = localStorage.getItem('token')if (!token) {ElMessage.error('请先登录')return navigateTo('/login')}}
})
不知道大家有没有发现,我们nuxt3是先去执行一下服务端而后执行客户端代码,所以我们需要给上面代码加一个判断。如下所示:
//全局中间件,拦截所有的请求,所以在about.vue中先输出“/about”,
//跳转到login.vue中输出“/login”//如果有多个全局中间件,根据ascll(阿斯克码)从小到大排序执行
export default defineNuxtRouteMiddleware((to, from) => {/*** 路由守卫*/let passURL = ['/','/login','/about','/index']if (!passURL.includes(to.path)) {let token = ''if (import.meta.client) {token = localStorage.getItem('token')}if (!token) {return navigateTo('/login')}}
})
这样无论去访问路由地址(服务端渲染),还是在客户端点击进行跳转,都会成功执行代码,实现路由守卫。但是这样就没有用户提示了,体验感很差,您请往下看。
//全局中间件,拦截所有的请求,所以在about.vue中先输出“/about”,
//跳转到login.vue中输出“/login”//如果有多个全局中间件,根据ascll(阿斯克码)从小到大排序执行
export default defineNuxtRouteMiddleware((to, from) => {/*** 路由守卫*///此时访问客户端正常执行//直接访问服务端,报500错误,因为没有tokenlet passURL = ['/','/login','/about','/index']if (!passURL.includes(to.path)) {let token = ''if (import.meta.client) {token = localStorage.getItem('token')}if (!token) {return navigateTo({path:'/login',query:{code:401,message:'没有token,请先登录'}})}}
})
<template><div><p>登录页面</p></div>
</template><script setup>
onMounted(() => {const route = useRoute();if (route.query.code) {ElMessage.error(route.query.code + "" + route.query.message);}
});
</script><style scoped>
</style>
得到的效果如下所示:

相关文章:
NUXT3学习日记四(路由中间件、导航守卫)
前言 在 Nuxt 3 中,中间件(Middleware)是用于在页面渲染之前或导航发生之前执行的函数。它们允许你在路由切换时执行逻辑,像是身份验证、重定向、权限控制、数据预加载等任务。中间件可以被全局使用,也可以只在特定页…...
数据科学与SQL:组距分组分析 | 区间分布问题
目录 0 问题描述 1 数据准备 2 问题分析 3 小结 0 问题描述 绝对值分布分析也可以理解为组距分组分析。对于某个指标而言,一个记录对应的指标值的绝对值,肯定落在所有指标值的绝对值的最小值和最大值构成的区间内,根据一定的算法&#x…...
odoo18中模型的常用字段类型
字段的公共属性: Char 字符类型,对应数据库中varchar类型,除了通用类型外接收另外两个参数: size: 字符长度,超出的长度将被截断 trim: 默认True,是否字段值应该被去空白。 Text 文本类型,对应数据库…...
【如何用更少的数据作出更好的决策】-gpt生成
如何用更少的数据作出更好的决策 用更少的数据作出更好的决策是一种能力的体现,需要结合有效的方法、严谨的逻辑以及对问题的深刻理解。以下是一些可以帮助你实现这一目标的策略: 明确目标 在收集和分析数据之前,先明确你的决策目标是什么…...
ara::com 与 AUTOSAR 元模型的关系总结
原文链接:AUTOSAR_EXP_ARAComAPI的7章笔记(6) 整体说明 先是表明此前解释 ara::com API 思想和机制时未涉及具体 AP 元模型清单部分,本章旨在阐明 ara::com 与相关元模型部分的关系,且是较高层次的基本理解性介绍&am…...
springboot整合hive
springboot整合hive pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.…...
浅谈 proxy
应用场景 Vue2采用的defineProperty去实现数据绑定,Vue3则改为Proxy,遇到了什么问题? - 在Vue2中不能检测数组和对象的变化 1. 无法检测 对象property 的添加或移除 var vm new Vue({data:{a:1} })// vm.a 是响应式的vm.b 2 // vm.b 是…...
Ansys Maxwell:SheetScan - 导入材料特性曲线
你好, 在这篇博文中,我展示了如何使用 Ansys Maxwell“SheetScan”工具导入材料特性数据集。在这篇博文中,我展示了如何导入复杂磁导率实部数据集以用于涡流(频率相关)求解器,并以 Ferroxcube 磁芯材料规格…...
解决 Android 单元测试 No tests found for given includes:
问题 报错: Execution failed for task :testDebugUnitTest. > No tests found for given includes: 解决方案 1、一开始以为是没有给测试类加public修饰 2、然后替换 Test 注解的包可以解决,将 org.junit.jupiter.api.Test 修改为 org.junit.Tes…...
人工智能的核心思想-神经网络
神经网络原理 引言 在理解ChatGPT之前,我们需要从神经网络开始,了解最简单的“鹦鹉学舌”是如何实现的。神经网络是人工智能领域的基础,它模仿了人脑神经元的结构和功能,通过学习和训练来解决复杂的任务。本文将详细介绍神经网络…...
JAVA中的Lamda表达式
JAVA中的Lamda表达式 Lambda 表达式的语法使用场景示例代码1.代替匿名内部类2. 带参数的 Lambda 表达式3. 与集合框架结合使用4. 使用 Stream 操作 总结 Java 的 Lambda 表达式是 Java 8 引入的一个新特性,用于简化代码,特别是在处理函数式编程时。Lambd…...
锂电池学习笔记(一) 初识锂电池
前言 锂电池近几年一直都是很热门的产品,充放电管理更是学问蛮多,工作生活中难免会碰到,所以说学习锂电池是工程师的必备知识储备,今天学习锂电池的基本知识,分类,优缺点,循序渐进 学习参考 【…...
深度学习2
四、tensor常见操作 1、元素值 1.1、获取元素值 tensor.item() 返回tensor的元素;只能在一个元素值使用,多个报错,当存在多个元素值时需要使用索引进行获取到一个元素值时在使用 item。 1.2、元素值运算 tensor对元素值的运算:…...
第六节-AppScan扫描报告
第六节-AppScan扫描报告 1.加载扫描结果 1.点击【打开】 2.选择之前保存过的扫描结果 3.等待加载完成 2.领导查看的报告 1.点击【报告】 2.模板选择为【缺省值】 3.最低严重性选择为【中】,测试类型选择为【应用程序】 4.点击【布局】 5.选择【其他徽标】&#x…...
【c++丨STL】stack和queue的使用及模拟实现
🌟🌟作者主页:ephemerals__ 🌟🌟所属专栏:C、STL 目录 前言 一、什么是容器适配器 二、stack的使用及模拟实现 1. stack的使用 empty size top push和pop swap 2. stack的模拟实现 三、queue的…...
基于SpringBoot的在线教育系统【附源码】
基于SpringBoot的在线教育系统 效果如下: 系统登录页面 系统管理员主页面 课程管理页面 课程分类管理页面 用户主页面 系统主页面 研究背景 随着互联网技术的飞速发展,线上教育已成为现代教育的重要组成部分。在线教育系统以其灵活的学习时间和地点&a…...
Kafka-副本分配策略
一、上下文 《Kafka-创建topic源码》我们大致分析了topic创建的流程,为了保持它的完整性和清晰度。细节并没有展开分析。下面我们就来分析下副本的分配策略以及副本中的leader角色的确定逻辑。当有了副本分配策略,才会得到分区对应的broker,…...
市场波动不断,如何自我提高交易心理韧性?
交易市场,一个由无数变量交织而成的复杂领域,常常因各方因素的微妙变化而掀起波澜。在这里,机遇与挑战并存,诱人的利润与潜在的风险如影随形,共同考验着每一位交易员的智慧与心理承受能力。在这样的环境下,…...
加速科技精彩亮相中国国际半导体博览会IC China 2024
11月18日—20日,第二十一届中国国际半导体博览会(IC China 2024)在北京国家会议中心顺利举办,加速科技携重磅产品及全系测试解决方案精彩亮相,加速科技创始人兼董事长邬刚受邀在先进封装创新发展论坛与半导体产业前沿与…...
利用c语言详细介绍下选择排序
选择排序(Selection sort)是一种简单直观的排序算法。它是每次选出最小或者最大的元素放在开头或者结尾位置(采用升序的方式),最终完成列表排序的算法。 一、图文介绍 我们还是使用数组【10,5,3…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
Java 二维码
Java 二维码 **技术:**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...
让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...
解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象: android studio报错: [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决: 不要动CMakeLists.…...
[特殊字符] 手撸 Redis 互斥锁那些坑
📖 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作,想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁,也顺便跟 Redisson 的 RLock 机制对比了下,记录一波,别踩我踩过…...
EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势
一、WebRTC与智能硬件整合趋势 随着物联网和实时通信需求的爆发式增长,WebRTC作为开源实时通信技术,为浏览器与移动应用提供免插件的音视频通信能力,在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能,对实时…...
npm安装electron下载太慢,导致报错
npm安装electron下载太慢,导致报错 背景 想学习electron框架做个桌面应用,卡在了安装依赖(无语了)。。。一开始以为node版本或者npm版本太低问题,调整版本后还是报错。偶尔执行install命令后,可以开始下载…...
职坐标物联网全栈开发全流程解析
物联网全栈开发涵盖从物理设备到上层应用的完整技术链路,其核心流程可归纳为四大模块:感知层数据采集、网络层协议交互、平台层资源管理及应用层功能实现。每个模块的技术选型与实现方式直接影响系统性能与扩展性,例如传感器选型需平衡精度与…...
6.9本日总结
一、英语 复习默写list11list18,订正07年第3篇阅读 二、数学 学习线代第一讲,写15讲课后题 三、408 学习计组第二章,写计组习题 四、总结 明天结束线代第一章和计组第二章 五、明日计划 英语:复习l默写sit12list17&#…...
