会话和身份验证
简介
在本技巧中，我们将使用 Nuxt Auth Utils 在全栈 Nuxt 应用程序中设置身份验证，该模块为管理客户端和服务器端会话数据提供了方便的实用程序。
该模块使用安全和密封的 Cookie 来存储会话数据，因此您无需设置数据库来存储会话数据。
安装 nuxt-auth-utils
使用 nuxi CLI 安装 nuxt-auth-utils 模块。
npx nuxi@latest module add auth-utils
nuxt-auth-utils 作为依赖项，并将其推送到 nuxt.config.ts 的 modules 部分中Cookie 加密密钥
由于 nuxt-auth-utils 使用密封的 Cookie 来存储会话数据，因此会话 Cookie 使用来自 NUXT_SESSION_PASSWORD 环境变量的密钥进行加密。
.env 中。NUXT_SESSION_PASSWORD=a-random-password-with-at-least-32-characters
登录 API 路由
对于本技巧，我们将创建一个简单的 API 路由，以便根据静态数据登录用户。
让我们创建一个 /api/login API 路由，该路由将接受请求正文中包含电子邮件和密码的 POST 请求。
import { z } from 'zod'
const bodySchema = z.object({
email: z.string().email(),
password: z.string().min(8)
})
export default defineEventHandler(async (event) => {
const { email, password } = await readValidatedBody(event, bodySchema.parse)
if (email === '[email protected]' && 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({
statusCode: 401,
message: 'Bad credentials'
})
})
zod 依赖项 (npm i zod)。登录页面
该模块公开了一个 Vue composable，用于了解用户是否在我们的应用程序中进行了身份验证
<script setup>
const { loggedIn, session, user, clear, fetch } = useUserSession()
</script>
让我们创建一个登录页面，其中包含一个表单，用于将登录数据提交到我们的 /api/login 路由。
<script setup lang="ts">
const { loggedIn, user, fetch: refreshSession } = useUserSession()
const credentials = reactive({
email: '',
password: '',
})
async function login() {
$fetch('/api/login', {
method: 'POST',
body: credentials
})
.then(async () => {
// 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 路由的示例，该路由只有经过身份验证的用户才能访问。
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 composable，我们将使用它来检查用户是否已登录，如果未登录，则重定向他们。
我们将在 /middleware 目录中创建一个中间件。与服务器上的中间件不同，客户端中间件不会自动应用于所有端点，我们需要指定要将它应用到哪里。
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 将中间件应用于我们要保护的路由。
<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 应用程序中成功设置了非常基本的用户身份验证和会话管理。我们还保护了服务器端和客户端上的敏感路由，以确保只有经过身份验证的用户才能访问它们。
作为后续步骤，您可以
- 使用20多个受支持的 OAuth 提供程序添加身份验证
- 添加数据库以存储用户，请参阅Nitro SQL 数据库或NuxtHub SQL 数据库
- 允许用户使用密码哈希通过电子邮件和密码注册
- 添加对WebAuthn / Passkeys的支持
查看开源的atidone 存储库，了解一个完整的 Nuxt 应用程序示例，其中包含 OAuth 身份验证、数据库和 CRUD 操作。