如何在Nuxt3服务端中间件中存储全局用户对象？

一、自己实现的具体步骤（推荐） #

你的场景需求简单，无需复杂认证流程，自己实现更轻量高效，具体步骤如下：

1. 服务端中间件解析JWT #

创建服务端中间件，从请求头提取JWT并解析，将用户信息存入请求上下文：

// server/middleware/auth.ts
import { verify } from 'jsonwebtoken'

export default defineEventHandler(async (event) => {
  const authHeader = getRequestHeader(event, 'Authorization')
  if (authHeader?.startsWith('Bearer ')) {
    const token = authHeader.slice(7)
    try {
      // 从环境变量读取JWT密钥，避免硬编码
      const decoded = verify(token, process.env.JWT_SECRET!) as { user: Record<string, any> }
      // 将解析后的用户信息存入请求上下文
      event.context.user = decoded.user
    } catch (err) {
      // 可选：验证失败时根据业务逻辑处理，如返回401
      // throw createError({ statusCode: 401, message: '无效的身份凭证' })
    }
  }
})

2. 插件同步用户信息到客户端全局状态 #

创建Nuxt插件，在服务端初始化时将上下文的用户信息同步到响应式全局状态，客户端直接复用该状态：

// plugins/auth.ts
export default defineNuxtPlugin(() => {
  // 创建全局响应式状态存储用户信息
  const user = useState('user', () => null)

  // 服务端执行时，从请求上下文获取用户信息并赋值
  if (process.server) {
    const event = useRequestEvent()
    if (event?.context.user) {
      user.value = event.context.user
    }
  }

  // 提供全局可调用的组合式函数
  return {
    provide: {
      useUser: () => user
    }
  }
})

3. 客户端使用 #

在页面或组件中直接获取用户信息：

<template>
  <div v-if="user">欢迎，{{ user.name }}</div>
  <div v-else>未登录</div>
</template>

<script setup>
// 方式一：通过插件提供的useUser函数
const { useUser } = useNuxtApp()
const user = useUser()

// 方式二：直接使用useState
// const user = useState('user')
</script>

二、是否需要使用认证库？ #

不推荐使用认证库。你的场景仅需解析基础设施层传入的JWT，无需OAuth、登录流程、token刷新等复杂功能，引入认证库（如@nuxt/auth-next）会带来大量冗余代码，增加应用复杂度和维护成本。

如果后续业务扩展需要更多认证相关功能（如token刷新、多端身份管理），再考虑引入认证库即可。

内容的提问来源于stack exchange，提问作者Pablo Settecase