前言
在 Nuxt 3 中，中间件（Middleware）是用于在页面渲染之前或导航发生之前执行的函数。它们允许你在路由切换时执行逻辑，像是身份验证、重定向、权限控制、数据预加载等任务。中间件可以被全局使用，也可以只在特定页面或布局中使用。
中间件必须在文件夹middleware中，在这个middleware文件夹中创建js文件
中间件的作用
- 身份验证：用于检查用户是否登录或是否有权限访问某些页面。
- 重定向：根据条件自动重定向用户到另一个页面。
- 条件加载数据：在路由切换前加载或检查数据。
- 页面控制：控制哪些页面可以访问，哪些不能。
- 日志记录：记录访问的路径、时间等信息。
普通中间件
以下就是一个中间件代码：
middleware/my.js
export 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错误，因为没有token
let 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错误，因为没有token
let 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>得到的效果如下所示：
