如何将全局用户对象存储在NUXT3服务器中间件中？

Question

使用nuxt 3。目前，我可以在服务器中间件中解析JWT以获取登录用户，但是我想whise cave降低该登录的用户信息到全局变量。登录用户 在我的NUXT Web应用程序将托管的环境中，身份验证发生在基础架构级别（K8S），因此我实际上不需要实现OAUTH机制。我只需要从请求标题中解析JWT。 我一直在阅读NUXT上下文，但我仍然对如何实际实施它感到困惑。您是否推荐这种方法，或其他诸如auth库之类的方法？

我认为使用用户案例的最佳方法是与服务器插件结合使用组合来管理用户状态。这是一个例子：

composables/useauth.ts

interface User {
  // define the shape you expect from the token
  sub: string
  email?: string
}

export const useAuth = () => {
  // Create a global state named 'user'.
  // Nuxt automatically serializes this state from SSR to client.
  return useState<User | null>('user', () => null)
}

Answer 1

然后有一个在服务器上运行的插件以填充商店中的用户状态

Plugins/auth.server.ts

import { parse } from 'some-jwt-library'    
import { getHeader } from 'h3' // <-- make sure to import from h3
import type {User} from "~/composables/useAuth"; // or from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
    const event = useRequestEvent()
    const token = getHeader(event, 'Authorization')
    if (!token) return

    const user = useState('user', () => null)
    // parse token...
    user.value = parse(token)
})

然后在您的.vue文件中您可以这样使用：

app.vue

<script setup lang="ts">
const user = useAuth()
</script>

<template>
  <div>
    Hello: {{  user }}
  </div>
</template>