基础篇八 Nuxt4 中间件进阶：请求拦截与权限校验

张

张建站

2026/4/17 17:42:16

10分钟阅读

文章目录一、中间件执行流程二、登录状态检查三、角色权限校验四、页面数据预加载五、访问日志记录六、IP 黑名单服务端七、API 请求拦截八、请求限流九、CORS 配置十、全局错误处理总结个人网站前面我们学过路由守卫用中间件控制页面访问权限。今天深入聊聊中间件的高级用法包括请求拦截、权限校验、数据预加载等实战技巧。一、中间件执行流程理解执行顺序很重要1. 全局中间件按字母排序 2. 页面定义的中间件 3. 布局中间件目录结构middleware/ ├── 01-auth.global.ts # 全局先执行 ├── 02-logging.global.ts # 全局后执行 ├── admin.ts # 页面级 └── guest.ts # 页面级二、登录状态检查最常见的场景// middleware/auth.tsexportdefaultdefineNuxtRouteMiddleware((to,from){constuserStoreuseUserStore()// 未登录跳转登录页if(!userStore.isLoggedIn){// 保存原目标路径登录后跳回returnnavigateTo({path:/login,query:{redirect:to.fullPath}})}})登录页面script setup langts const route useRoute() const userStore useUserStore() const form reactive({ email: , password: }) const login async () { await userStore.login(form.email, form.password) // 登录成功跳回原页面 const redirect route.query.redirect as string navigateTo(redirect || /) } /script三、角色权限校验不同用户有不同权限// middleware/role.tstypeRoleadmin|editor|userexportdefaultdefineNuxtRouteMiddleware((to,from){constuserStoreuseUserStore()// 从路由 meta 获取需要的角色constrequiredRoleto.meta.roleasRoleif(!requiredRole)return// 未登录或权限不足if(!userStore.user||!hasPermission(userStore.user.role,requiredRole)){returnnavigateTo(/403)}})// 权限等级constroleLevel:RecordRole,number{admin:3,editor:2,user:1}consthasPermission(userRole:Role,requiredRole:Role){returnroleLevel[userRole]roleLevel[requiredRole]}页面中使用script setup langts definePageMeta({ middleware: role, meta: { role: admin // 只有管理员能访问 } }) /script四、页面数据预加载中间件可以预加载数据避免页面闪烁// middleware/fetch-user.global.tsexportdefaultdefineNuxtRouteMiddleware(async(to,from){constuserStoreuseUserStore()consttokenuseCookie(token)// 有 token 但没有用户数据尝试获取if(token.value!userStore.user){try{awaituserStore.fetchUser()}catch{// token 失效清除token.valuenull}}})五、访问日志记录记录页面访问// middleware/logging.global.tsexportdefaultdefineNuxtRouteMiddleware((to,from){constuserStoreuseUserStore()// 只在客户端记录if(import.meta.client){constlogData{userId:userStore.user?.id||anonymous,from:from.path,to:to.path,timestamp:newDate().toISOString(),userAgent:navigator.userAgent}// 发送到日志服务不阻塞导航$fetch(/api/logs,{method:POST,body:logData}).catch(console.error)}})六、IP 黑名单服务端// middleware/ip-block.global.tsexportdefaultdefineNuxtRouteMiddleware(async(to,from){// 只在服务端执行if(import.meta.server){consteventuseRequestEvent()constipgetRequestIP(event,{xForwardedFor:true})// 检查 IP 是否被封禁constblockedawaitcheckBlockedIP(ip)if(blocked){returnnavigateTo(/blocked)}}})constcheckBlockedIPasync(ip:string):Promiseboolean{// 实际项目中可以从数据库或 Redis 查询constblockedIPs[192.168.1.100,10.0.0.50]returnblockedIPs.includes(ip)}七、API 请求拦截服务端 API 路由也可以用中间件// server/middleware/auth.tsexportdefaultdefineEventHandler(async(event){consturlgetRequestURL(event)// 只拦截需要认证的接口if(!url.pathname.startsWith(/api/protected/)){return}consttokengetHeader(event,Authorization)?.replace(Bearer ,)if(!token){throwcreateError({statusCode:401,message:Unauthorized})}try{constuserawaitverifyToken(token)event.context.useruser}catch{throwcreateError({statusCode:401,message:Invalid token})}})API 接口中使用// server/api/protected/profile.tsexportdefaultdefineEventHandler((event){constuserevent.context.userreturn{id:user.id,name:user.name,email:user.email}})八、请求限流防止接口被滥用// server/middleware/rate-limit.tsconstrequestsnewMapstring,number[]()exportdefaultdefineEventHandler((event){constipgetRequestIP(event)constnowDate.now()constwindowMs60*1000// 1 分钟constmaxRequests100// 最多 100 次请求// 获取该 IP 的请求记录constipRequestsrequests.get(ip)||[]// 过滤掉窗口外的请求constrecentRequestsipRequests.filter(timenow-timewindowMs)// 检查是否超限if(recentRequests.lengthmaxRequests){throwcreateError({statusCode:429,message:Too many requests})}// 记录本次请求recentRequests.push(now)requests.set(ip,recentRequests)})九、CORS 配置// server/middleware/cors.tsexportdefaultdefineEventHandler((event){constallowedOrigins[https://example.com,https://admin.example.com]constorigingetHeader(event,origin)||if(allowedOrigins.includes(origin)){setResponseHeaders(event,{Access-Control-Allow-Origin:origin,Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS,Access-Control-Allow-Headers:Content-Type, Authorization,Access-Control-Allow-Credentials:true})}// 处理预检请求if(getMethod(event)OPTIONS){setResponseStatus(event,204)return}})十、全局错误处理// server/middleware/error-handler.tsexportdefaultdefineEventHandler((event){// 设置错误处理event.node.res.on(finish,(){conststatusgetResponseStatus(event)if(status400){consturlgetRequestURL(event)console.error(Error${status}:${url})// 发送到错误监控服务}})})总结中间件高级用法场景实现方式登录检查全局中间件 token 判断角色权限to.meta.role 权限比较数据预加载中间件中调用 store 方法访问日志全局中间件异步上报IP 黑名单服务端中间件 IP 检查API 拦截server/middleware/请求限流Map 记录时间窗口下一篇聊聊插件系统学习如何扩展 Nuxt 能力。相关文章入门篇三Nuxt4组件自动导入写代码少敲一半字入门篇二Nuxt 4路由自动生成告别手动配置路由的日子延伸阅读nuxt4完整系列持续更新中。。欢迎来逛逛内容有帮助点赞、收藏、关注三连评论区等你

终极指南：如何用novideo_srgb免费解决显示器色彩偏差问题

终极指南：如何用novideo_srgb免费解决显示器色彩偏差问题【免费下载链接】novideo_srgb Calibrate monitors to sRGB or other color spaces on NVIDIA GPUs, based on EDID data or ICC profiles 项目地址: https://gitcode.com/gh_mirrors/no/novideo_srgb …...

2026/4/17 17:27:30 阅读更多 →

办公室隐私危机？3种场景下Boss-Key老板键的终极解决方案

办公室隐私危机？3种场景下Boss-Key老板键的终极解决方案【免费下载链接】Boss-Key 老板来了？快用Boss-Key老板键一键隐藏静音当前窗口！上班摸鱼必备神器项目地址: https://gitcode.com/gh_mirrors/bo/Boss-Key 你是否经历过这样的尴…...

2026/4/15 14:59:42 阅读更多 →

终极Windows部署指南：如何用MediaCreationTool.bat轻松绕过TPM限制升级到Windows 11

终极Windows部署指南：如何用MediaCreationTool.bat轻松绕过TPM限制升级到Windows 11 【免费下载链接】MediaCreationTool.bat Universal MCT wrapper script for all Windows 10/11 versions from 1507 to 21H2! 项目地址: https://gitcode.com/gh_mirrors/me/Med…...

2026/4/15 14:57:39 阅读更多 →

⑩【从0制作自己的ros导航小车：上位机篇】05、导航！

1. 从地图到导航的关键跨越当你完成地图构建的那一刻，就像拿到了一张藏宝图，但要让小车真正动起来寻宝，还需要一套完整的导航系统。ROS中的amcl和move_base就是实现这一目标的核心组件。amcl负责定位，让小车知道"我在哪&quo…...

2026/4/17 11:10:51 阅读更多 →

如何构建高性能的消息队列系统

如何构建高性能的消息队列系统在当今高并发的互联网应用中，消息队列系统扮演着关键角色，它能够解耦服务、削峰填谷，并提升系统的整体吞吐量。随着业务规模的扩大，如何构建一个高性能、高可用的消息队列系统成为开发者面临的挑战…...

2026/4/17 10:12:00 阅读更多 →

Java Iterator

Java Iterator 在Java编程语言中，Iterator接口是Java集合框架的一部分，主要用于遍历集合中的元素。本文将详细介绍Java的Iterator接口，包括其定义、使用方法以及与ListIterator的区别。定义 Iterator是一个用于遍历集合中元素的接口。它提供了迭代器的基本操作，例如：检…...

2026/4/17 10:12:00 阅读更多 →