Nuxt3 세션 쿠키 관리
Nuxt안녕하세요 Lovefield입니다.
최근 모든 작업을 Nuxt3로 이전하는 중입니다. 새로운 Nuxt 버전이 나온 것도 한 몫 하지만, TypeScript를 사용하려는 목적이 더 큽니다. 기존에 쿠키를 이용해 세션을 관리하고 있었기 때문에 Nuxt3에서도 동일하게 관리하기 위해서 여러가지 설정한 방법들을 정리해보려 합니다.
기존 Nuxt2에서는 “cookie-universal-nuxt” 모듈을 이용해서 쿠키를 관리했었습니다. Nuxt3에서는 자체적으로 쿠키를 관리할 수 있도록 composable을 지원합니다. composable 명령어 중에 useCookie와setCookie,getCookie를 사용하여 작업했습니다. 이 중 setCookie와 getCookie는 서버에서만 동작하는 composable입니다.
기본적인 사용 방법은 다음과 같습니다.
html
<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가 제공하는 방법은 굉장히 깔끔합니다.
다음은 서버에서 쿠키를 관리하기 위한 방법입니다.
javascript
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”처럼 두 가지의 함수를 이용해 쿠키를 관리합니다.
이제 세션키를 가진 쿠키를 생성해볼 차례입니다.
html
<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에 쿠키에 넣을 값인 세션키를 전달했습니다.
javascript
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 파라미터로 쿠키를 지울때 사용합니다.
javascript
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에서 쿠키 유무를 가지고 세션 정보를 받아오도록 설정했습니다.
