Nuxt3 세션 쿠키 관리

안녕하세요 Lovefield입니다.

최근 모든 작업을 Nuxt3로 이전하는 중입니다. 새로운 Nuxt 버전이 나온 것도 한 몫 하지만, TypeScript를 사용하려는 목적이 더 큽니다. 기존에 쿠키를 이용해 세션을 관리하고 있었기 때문에 Nuxt3에서도 동일하게 관리하기 위해서 여러가지 설정한 방법들을 정리해보려 합니다.

기존 Nuxt2에서는 “cookie-universal-nuxt” 모듈을 이용해서 쿠키를 관리했었습니다. Nuxt3에서는 자체적으로 쿠키를 관리할 수 있도록 composable을 지원합니다. composable 명령어 중에 useCookie와setCookie,getCookie를 사용하여 작업했습니다. 이 중 setCookie와 getCookie는 서버에서만 동작하는 composable입니다.

기본적인 사용 방법은 다음과 같습니다.

<template>
  <div>
    <h1>Counter: {{ counter || '-' }}</h1>
    <button @click="counter = null">reset</button>
    <button @click="counter--">-</button>
    <button @click="counter++">+</button>
  </div>
</template>

<script setup>
const counter = useCookie('counter')
counter.value = counter.value || Math.round(Math.random() * 1000)
</script>

Nuxt2에서 “cookie-universal-nuxt” 모듈을 이용해서 “set”, ”get” 메서드를 이용하던 방법을 생각하면 Nuxt3가 제공하는 방법은 굉장히 깔끔합니다.

다음은 서버에서 쿠키를 관리하기 위한 방법입니다.

export default defineEventHandler(event => {
  // Read counter cookie
  let counter = getCookie(event, 'counter') || 0

  // Increase counter cookie by 1
  setCookie(event, 'counter', ++counter)

  // Send JSON response
  return { counter }
})

서버에서 사용하는 “defineEventHandler” 함수 내에서만 사용이 가능합니다. useCookie와는 조금 다르게 “get”과 “set”처럼 두 가지의 함수를 이용해 쿠키를 관리합니다.

이제 세션키를 가진 쿠키를 생성해볼 차례입니다.

<template>
…
</tempalte>

<script setup lang=”ts”>
async function loginAction(){
    const makeCookie = await $fetch(“/api/set-cookie”,{
        method:”post”,
        body:{key:”session key value”}
    });
}
</script>

로그인 페이지에서 loginAction 함수를 통해 Nuxt3에서 제공하는 서버 API로 통신을 요청합니다. “~/server/api/set-cookie.post.ts” 파일에 “post” 메서드로 요청을 보내며 body에 쿠키에 넣을 값인 세션키를 전달했습니다.

export default defineEventHandler(async (event) => {
    const body = await readBody(event);

    try {
        setCookie(event, "hwitturuSessionKey", body.key, {
            path: "/",
            sameSite: true,
            httpOnly: true,
        });

        return {
            result: true,
        };
    } catch {
        return {
            result: false,
        };
    }
});

“set-cookie.post.ts”파일입니다. loginAction 함수에서 발생한 서버 통신을 받는 곳으로, defineEventHandler 함수 내에서 돌아가도록 되어있습니다. Nuxt3에서 제공하는 setCookie를 이용해 body로 전달된 key 값을 쿠키로 할당합니다.

httpOnly 옵션을 사용하는 이유는 클라이언트에서 쿠키를 조작할 수 없도록 하기 위해서입니다. maxAge나 expires는 사용하지 않았습니다. Nuxt3에서는 이 둘을 선언하지 않으면 기본적으로 브라우저가 종료될 때 쿠키가 사라지게 되어있습니다.

다음은 로그아웃을 하기 위한 설정입니다. ~/server/api/del-cookie.get.ts 파일을 생성합니다. 다음 코드는 서버에서 get 파라미터로 쿠키를 지울때 사용합니다.

export default defineEventHandler(async (event) => {
    try {
        setCookie(event, "hwitturuSessionKey", "", {
            maxAge: -1,
            path: "/",
            sameSite: true,
            httpOnly: true,
        });

        return {
            result: true,
        };
    } catch {
        return {
            result: false,
        };
    }
});

useCookie와 달리 값에 null을 선언하는 방식으로 쿠키를 지울 수 없기 때문에 maxAge를 -1로 설정하여 지워줍니다. 이후 middleware에서 쿠키 유무를 가지고 세션 정보를 받아오도록 설정했습니다.