会话和认证

身份验证是 Web 应用中极其常见的需求。本指南将向您展示如何在 Nuxt 应用中实现基本的用户注册和身份验证。

介绍

在本指南中，我们将使用以下工具在全栈 Nuxt 应用中设置身份验证：Nuxt Auth Utils它为管理客户端和服务器端会话数据提供了便捷的工具。

该模块使用安全且密封的 Cookie 来存储会话数据，因此您无需设置数据库来存储会话信息。

安装 nuxt-auth-utils

使用 nuxt CLI 安装 nuxt-auth-utils 模块。

终端
npx nuxt module add auth-utils
此命令将把 nuxt-auth-utils 作为依赖项安装，并将其添加到 nuxt.config.ts 的 modules 部分。

Cookie 加密密钥

由于 nuxt-auth-utils 使用密封的 Cookie 来存储会话数据，会话 Cookie 会使用 NUXT_SESSION_PASSWORD 环境变量中的密钥进行加密。

如果未设置，该环境变量会在开发模式下运行项目时自动添加到您的 .env 文件中。
.env
NUXT_SESSION_PASSWORD=a-random-password-with-at-least-32-characters
在部署到生产环境之前，您需要将此环境变量添加到生产环境中。

登录 API 路由

在本指南中，我们将创建一个简单的 API 路由，用于基于静态数据对用户进行登录验证。

让我们创建一个 /api/login API 路由，该路由将接受包含请求正文中电子邮件和密码的 POST 请求。

server/api/login.post.ts
import { z } from 'zod'

const bodySchema = z.object({
  email: z.email(),
  password: z.string().min(8),
})

export default defineEventHandler(async (event) => {
  const { email, password } = await readValidatedBody(event, bodySchema.parse)

  if (email === 'admin@admin.com' && password === 'iamtheadmin') {
    // set the user session in the cookie
    // this server util is auto-imported by the auth-utils module
    await setUserSession(event, {
      user: {
        name: 'John Doe',
      },
    })
    return {}
  }
  throw createError({
    status: 401,
    message: 'Bad credentials',
  })
})
请确保在项目中安装了 zod 依赖（npm i zod）。
阅读更多关于 nuxt-auth-utils 暴露的 setUserSession 服务器助手的信息。

登录页面

该模块提供了一个 Vue 组合式函数（composable），用于了解用户是否已在我们的应用中进行身份验证。

<script setup>
const { loggedIn, session, user, clear, fetch } = useUserSession()
</script>

让我们创建一个登录页面，其中包含一个表单，用于将登录数据提交到我们的 /api/login 路由。

app/pages/login.vue
<script setup lang="ts">
const { loggedIn, user, fetch: refreshSession } = useUserSession()
const credentials = reactive({
  email: '',
  password: '',
})
async function login () {
  try {
    await $fetch('/api/login', {
      method: 'POST',
      body: credentials,
    })

    // Refresh the session on client-side and redirect to the home page
    await refreshSession()
    await navigateTo('/')
  } catch {
    alert('Bad credentials')
  }
}
</script>

<template>
  <form @submit.prevent="login">
    <input
      v-model="credentials.email"
      type="email"
      placeholder="Email"
    >
    <input
      v-model="credentials.password"
      type="password"
      placeholder="Password"
    >
    <button type="submit">
      Login
    </button>
  </form>
</template>

保护 API 路由

保护服务器路由是确保数据安全的关键。客户端中间件对用户体验很有帮助，但如果没有服务器端保护，您的数据仍然可能被访问。保护任何包含敏感数据的路由至关重要，如果用户未登录，我们应该返回 401 错误。

auth-utils 模块提供了 requireUserSession 工具函数，用于帮助确保用户已登录并拥有有效的会话。

让我们创建一个 /api/user/stats 路由示例，该路由仅限已通过身份验证的用户访问。

server/api/user/stats.get.ts
export default defineEventHandler(async (event) => {
  // make sure the user is logged in
  // This will throw a 401 error if the request doesn't come from a valid user session
  const { user } = await requireUserSession(event)

  // TODO: Fetch some stats based on the user

  return {}
})

保护应用路由

通过设置服务器端路由，我们的数据是安全的，但如果不做其他处理，未经身份验证的用户在尝试访问 /users 页面时，可能会获取到一些奇怪的数据。我们应该创建一个客户端中间件来在客户端保护路由，并将用户重定向到登录页面。

nuxt-auth-utils 提供了一个便捷的 useUserSession 组合式函数，我们将使用它来检查用户是否已登录，如果未登录则重定向他们。

我们将在 /middleware 目录中创建一个中间件。与服务器端不同，客户端中间件不会自动应用于所有端点，我们需要明确指定应用的位置。

app/middleware/authenticated.ts
export default defineNuxtRouteMiddleware(() => {
  const { loggedIn } = useUserSession()

  // redirect the user to the login screen if they're not authenticated
  if (!loggedIn.value) {
    return navigateTo('/login')
  }
})

主页

现在我们有了保护路由的中间件，可以在显示已验证用户信息的主页中使用它了。如果用户未通过身份验证，他们将被重定向到登录页面。

我们将使用 definePageMeta 将中间件应用于我们要保护的路由。

app/pages/index.vue
<script setup lang="ts">
definePageMeta({
  middleware: ['authenticated'],
})

const { user, clear: clearSession } = useUserSession()

async function logout () {
  await clearSession()
  await navigateTo('/login')
}
</script>

<template>
  <div>
    <h1>Welcome {{ user.name }}</h1>
    <button @click="logout">
      Logout
    </button>
  </div>
</template>

我们还添加了一个注销按钮，用于清除会话并将用户重定向到登录页面。

结论

我们已经成功在 Nuxt 应用中设置了基础的用户身份验证和会话管理。我们还通过保护服务器和客户端的敏感路由，确保只有经过身份验证的用户才能访问它们。

下一步，您可以：

查看开源的atidone 仓库以获取包含 OAuth 身份验证、数据库和 CRUD 操作的完整 Nuxt 应用示例。