사이트를 새로고침하면 로그인 세션이 풀리는 문제를 어떻게 해결했는지 적어둔다.

사실 새로고침했을 때 유저 로그인 정보가 도망가서 돌연 사이트와 유저가 어색한 사이가 되는 원인은 로그인을 어떻게 구현했느냐에 따라 다양하다. 우리 프로젝트에서는 로그인 정보를 저장하는 방법으로 Context를 썼다.
그리고 새로고침을 할 때마다 getme 라는 API가 실행되어 서버로부터 유저 정보를 받아온다.

오류 개요

사이트를 새로고침하면 유저 프로필 정보가 날아가고 사이트 접속 상태가 비회원 상태로 바뀐다. 2가지 가능성을 생각해볼 수 있다.

새로고침 할 때마다,

1. 어디선가 로그아웃을 하고 있다.
2. 유저 인증 정보가 담긴 쿠키를 서버에 제대로 보내지 못하고 있다.

오류 내용

확인해보니 별도로 로그아웃 함수가 실행되지는 않는다. 그렇다면 쿠키의 인증 정보를 API 헤더에 제대로 실어보내지 못하고 있을 공산이 크다. 쿠키에는 인증 정보가 잘 담겨있어, API 요청을 정의하는 미들웨어를 살펴보았다.

일단은 fetch에 헤더를 명시적으로 정의하는 로직은 없었다. 넣어주면 끝난다.

해결 방법

async request() {
  const {cookies} = await import('next/headers')
  ...
  const res = await fetch('url', {
    headers: {Cookie: cookies().toString()}
  })
  ...
}

참고자료

• https://nextjs.org/docs/app/api-reference/functions/headers