[NextJS] Access Token 관리

정리이유

: 페이지 새로고침 시 State가 사라지고 SSR 랜더링에서는 처리방법이 다르기 때문

JWT Access Token을 관리하는 3가지 방법

• Cookie
• Local Storage
• Session

위 3가지 방법에서 Cookie를 활용해 Token을 관리하고

Session을 유지시키는 방법에 대해 정리

Install Package

npm i react-cookies next-cookies
npm i @types/react-cookies (타입스크립트 사용 시)

 

*next-cookies 패키지는 Cookie에 담겨있는 값들을 JSON 형태로 변환해줍니다.

// 기존 Cookie가 값을 보관하는 방식
accessToken=ABCDEDFD; refreshToken=DFSGGDF;

// next-cookies로 Cookie 값을 JSON 포맷으로 변환
{
	accessToken: 'ABCDEDFD',
	refreshToken: 'DFSGGDF'
}

 

Next JS 설정

: 페이지 새로고침 시 Token 유지

_app.tsx 안에 appContext 내용 (AppTree, Component, router, ctx)

이 4개중에 ctx 확인

 

...
App.getInitialProps = async (appContext: AppContext) => {
  const appProps = await App.getInitialProps(appContext)
  
  const {ctx} = appContext;
  console.log(Object.keys(ctx));

	/* ctx의 키값들
		[
		  'err',     'req',
		  'res',     'pathname',
		  'query',   'asPath',
		  'AppTree'
		]
	*/
...

 

Cookie는  ctx > headers > cookie  에 담겨있습니다

...
    const cookieReq = ctx.req ? ctx.req.headers.cookie : null
    console.log("cookieReq: ", cookieReq)
		// cookieReq:  accessToken=AAA; refreshToken=BBB
...

next-cookie 를 이용해 header에 있는 cookie를 json으로 변경합니다

...
    const allCookies = cookies(ctx);
    console.log("allCookies: ", allCookies)
    const accessTokenByCookie = allCookies['accessToken'];
    console.log("accessTokenByCookie: ", accessTokenByCookie)

		/* 
		출력내용
		
		allCookies:  {
		  accessToken: 'AAA',
		  refreshToken: 'BBB'
		}
		accessTokenByCookie:  AAA

		*/
...

 

최종 코드

Token 관리 컴포넌트로 쿠키값을 넘겨줍니다

// _app.tsx

import {setToken} from "../function/TokenManager";
import cookies from "next-cookies";
...

...
App.getInitialProps = async (appContext: AppContext) => {
    const appProps = await App.getInitialProps(appContext)

    const {ctx} = appContext;
    const allCookies = cookies(ctx);
    const accessTokenByCookie = allCookies['accessToken'];
    if(accessTokenByCookie !== undefined) {
        const refreshTokenByCookie = (allCookies["refreshToken"] || "");
        setToken(accessTokenByCookie, refreshTokenByCookie)
    }

    return {...appProps}
}
...