SSR 토큰 관리 (next.js + react-cookie)

1. 로그인에 성공하면 쿠키에 백엔드에서 받은 토큰을 저장한다.

// ToknenManager.tsx
// 로그인에 성공하면 setToken(token)으로 axios 기본 헤더를 세팅하고 cookie에 저장한다.
function setToken(token: Token) {
    axios.defaults.headers.common["Authorization"] = `${token}`;

    cookie.save("token", token, { path: "/", httpOnly: true });
}

export { setToken };

2. getInitialProps로 web이 실행되면 SSR cookie가 날아가지않게 다시 저장해준다.

App.getInitialProps = async (ctx: Context) => {
  // key의 값을 출력하는 함수를 만듬.
  function getCookie(key: any) {
        let result = null;
    // cookie log를 찍어보면 ;로 구분해서 string 값으로 들어오기 때문에 split으로 나눈다.
        let cookie = ctx?.ctx?.req?.headers?.cookie?.split(";");
        cookie.some(function (item: any) {
            // 공백을 제거
            item = item.replace(" ", "");

            let dic = item.split("=");

            if (key === dic[0]) {
                result = dic[1];
                return true; // break;
            }
        });
        return result;
    }
    const token = getCookie("token");

    if (token) {
        setToken(token);
    }
    return {};
    

3. 새로고침, 페이지 이동시 token 유지

 useEffect(() => {
        let token = cookie.load("token");
        setToken(token);
    }, [router]);

refresh는 local로, access는 cookie