Nuxt 3 如何自定义服务端中间件处理用户登录态

Nuxt 3 自定义服务端中间件处理登录态主要通过 middleware 目录下的 defineNuxtRouteMiddleware 实现，配合 useCookie 读取 Token。适用 SSR 首屏鉴权场景，风险在于客户端与服务端 Cookie 读写权限不一致可能导致重定向循环。

先说结论：使用路由中间件拦截请求，结合 Cookie 验证身份。

适合 SSR 应用
先看 Cookie 同源策略
建议全局注册中间件

快速处理思路

在项目中创建中间件文件，读取 Cookie 中的 Token，验证失败则重定向。

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const token = useCookie('token')
  if (!token.value) {
    return navigateTo('/login')
  }
})

为什么会这样

中间件在路由解析前执行，可拦截服务端渲染请求。Nuxt 3 的 useCookie 在服务端和客户端均可访问，但需注意 HttpOnly 属性影响。

分步处理

1. 创建中间件文件：在 middleware 目录新建 auth.ts。

2. 获取登录态：使用 useCookie 读取存储的 Token。

3. 验证逻辑：判断 Token 是否存在或调用接口验证有效性。

4. 注册中间件：在 nuxt.config.ts 中全局注册或在页面 meta 中局部引用。

怎么验证是否生效

访问受保护页面，未登录状态应自动跳转登录页。检查浏览器 Network 面板确认 307 或 302 重定向状态码。

常见坑

1. 重定向循环：登录页本身未排除中间件验证。

2. hydration mismatch：服务端与客户端 Cookie 读取结果不一致。

3. 权限泄露：中间件未覆盖 API 路由，仅保护了页面路由。

常见问题

中间件如何获取用户详细信息？

在中间件中使用 useFetch 调用用户信息接口，或将逻辑移至插件中初始化状态。

全局中间件和页面中间件有什么区别？

全局中间件对所有路由生效，页面中间件仅对配置该 meta 的页面生效。

参考来源

Nuxt 3 路由系统详解：配置与实践指南
nuxt3 middleware auth 实现 Nuxt 3 身份验证中间件
Nuxt3 身份验证登陆 cookie 实现的效果
保护 Nuxt 3 应用页面:nuxt-auth 中间件使用详解