Nuxt.js 会话管理与身份认证实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00294/article/details/148324408

Nuxt.js 会话管理与身份认证实战指南

nuxt The Intuitive Vue Framework. 项目地址: https://gitcode.com/gh_mirrors/nu/nuxt

前言

在现代 Web 应用中，身份认证是必不可少的功能。本文将详细介绍如何在 Nuxt.js 应用中实现完整的会话管理和用户认证系统，从基础配置到高级防护措施，帮助开发者构建安全可靠的应用。

核心模块介绍

Nuxt Auth Utils 是一个专门为 Nuxt.js 设计的认证工具模块，它提供了以下核心功能：

客户端和服务端会话管理
基于加密 Cookie 的安全会话存储
开箱即用的认证工具函数
无缝集成的开发体验

环境配置

1. 模块安装

首先需要安装 nuxt-auth-utils 模块：

npx nuxt module add auth-utils

安装完成后，模块会自动添加到项目的 nuxt.config.ts 配置文件中。

2. 安全密钥设置

会话数据使用加密 Cookie 存储，必须配置足够强度的加密密钥：

NUXT_SESSION_PASSWORD=32位以上的随机字符串

安全提示：生产环境必须设置此变量，开发模式下会自动生成临时密钥。

认证系统实现

1. 登录接口开发

创建 /api/login 接口处理用户认证：

// server/api/login.post.ts
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 === 'admin@admin.com' && password === 'iamtheadmin') {
    await setUserSession(event, {
      user: {
        name: 'John Doe'
      }
    })
    return {}
  }
  
  throw createError({
    statusCode: 401,
    message: 'Bad credentials'
  })
})

关键点：

使用 Zod 进行输入验证
setUserSession 设置用户会话
401 状态码返回认证失败

2. 登录页面实现

创建登录页面处理用户交互：

<script setup lang="ts">
const { fetch: refreshSession } = useUserSession()
const credentials = reactive({
  email: '',
  password: '',
})

async function login() {
  try {
    await $fetch('/api/login', {
      method: 'POST',
      body: credentials
    })
    await refreshSession()
    await navigateTo('/')
  } catch {
    alert('认证失败，请检查凭据')
  }
}
</script>

<template>
  <form @submit.prevent="login">
    <input v-model="credentials.email" type="email" placeholder="邮箱" required>
    <input v-model="credentials.password" type="password" placeholder="密码" required>
    <button type="submit">登录</button>
  </form>
</template>

安全防护措施

1. 服务端路由保护

敏感接口必须进行服务端验证：

// server/api/user/stats.get.ts
export default defineEventHandler(async (event) => {
  const { user } = await requireUserSession(event)
  
  // 业务逻辑...
  return { /* 用户数据 */ }
})

2. 客户端路由保护

创建认证中间件保护前端路由：

// middleware/authenticated.ts
export default defineNuxtRouteMiddleware(() => {
  const { loggedIn } = useUserSession()
  if (!loggedIn.value) {
    return navigateTo('/login')
  }
})

应用中间件到受保护页面：

<script setup>
definePageMeta({
  middleware: ['authenticated']
})
</script>

用户界面集成

1. 主页实现

展示用户信息并提供登出功能：

<script setup lang="ts">
const { user, clear: clearSession } = useUserSession()

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

<template>
  <div>
    <h1>欢迎 {{ user.name }}</h1>
    <button @click="logout">退出登录</button>
  </div>
</template>