[Next.js] GetServerSideProps 헤더에 인증 토큰 추가 하는 방법 (쿠키 사용)

 

 

 

 Next.js에서는 클라이언트에서 API 요청을 보내는 방법이 있고 GetServerSideProps 함수 처럼 서버 사이드에서 API 요청을 보내는 방법이 있다.

 

 

클라이언트 사이드에서 요청 시

 

• 클라이언트 사이드에서는 보통 브라우저의 JavaScript를 통해 API 요청을 보낸다.
• JWT 엑세스 토큰과 같은 인증 정보를 로컬 스토리지, 세션 스토리지, 쿠키 등에 저장할 수 있다.

 

서버 사이드에서 요청 시

 

• 서버 사이드에서는 Next.js의 렌더링 과정 중에 API 요청을 처리한다.
• 서버 사이드에서는 클라이언트 사이드의 로컬 스토리지나 세션 스토리지에 접근할 수 없기 때문에, 대신 HTTP 요청의 쿠키를 통해 인증 정보를 관리한다.

 

 

 우리 개발 팀에서는 인가를 위해 Jwt 엑세스 토큰 사용하였기에 브라우저 어딘가에 저장하였다가 API 요청 시 요청 헤더에 토큰을 붙여 줘야 했다. 이 때 로컬 스토리지에 토큰을 저장한다면 서버 사이드에서 요청을 보낼 때 접근이 불가해서 값을 가져올 수 없었다. 그래서 쿠키를 이용했다. getServerSideProps의 context 객체에서 쿠키를 꺼내어 요청 헤더에 토큰을 붙여 줘야 했다.

 

---

 

 

getServerSideProps

 

 

함수 내에서 제공하는 context 객체를 받아서 cookie를 꺼내고 요청 헤더에 입력한다.

const getServerSidePropsFunction: GetServerSideProps<{
  fetchData: IGetData;
}> = async (context) => {
  setServerSideCookie(context);   // 쿠키 꺼내고 요청 헤더에 입력
  
  const res = await axiosInstance.get('/api/mileage/admins');
  const fetchData = res.data;

  return { props: { fetchData } };
};

 

 

 

 

쿠키 설정

export function setServerSideCookie(context) {
  let { cookie } = context.req.headers;

  cookie = getKeyFromPairString(cookie, 'accessToken');

  if (cookie !== '') {
    axiosInstance.defaults.headers.common.Authorization = `Bearer ${cookie}`;
  }
}

export function getKeyFromPairString(cookie, key) {
  const pairArr = cookie ? cookie?.split(';').map((pair) => pair.trim()) : [];

  for (const pair of pairArr) {
    const [pairKey, pairValue] = pair.split('=').map((c) => c.trim());

    if (pairKey === key) {
      return pairValue;
    }
  }

  return '';
}