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>

得到的效果如下所示：