npx nuxt module add auth-utils

NUXT_SESSION_PASSWORD=a-random-password-with-at-least-32-characters

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') {
    // 쿠키에 사용자 세션 설정
    // 이 서버 유틸리티는 auth-utils 모듈에 의해 자동으로 가져옵니다
    await setUserSession(event, {
      user: {
        name: 'John Doe'
      }
    })
    return {}
  }
  throw createError({
    statusCode: 401,
    message: '잘못된 자격 증명'
  })
})

<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 () => {
    // 클라이언트 측에서 세션을 새로고침하고 홈 페이지로 리디렉션
    await refreshSession()
    await navigateTo('/')
  })
  .catch(() => alert('잘못된 자격 증명'))
}
</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>

export default defineEventHandler(async (event) => {
  // 사용자가 로그인했는지 확인
  // 유효한 사용자 세션에서 요청이 오지 않으면 401 오류를 발생시킵니다
  const { user } = await requireUserSession(event)

  // TODO: 사용자 기반의 통계를 가져옵니다

  return {}
});

export default defineNuxtRouteMiddleware(() => {
  const { loggedIn } = useUserSession()

  // 인증되지 않은 경우 사용자를 로그인 화면으로 리디렉션
  if (!loggedIn.value) {
    return navigateTo('/login')
  }
})

<script setup lang="ts">
definePageMeta({
  middleware: ['authenticated'],
})
  
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>