Cookie 도입기

 

이번 프로젝트를 진행하면서 AccessToken과 RefreshToken을 이용하여 로그인한 사용자를 구분하고 인증하는 방식을 사용하였다.

AccessToken은 localStorage에 저장을 하였고 RefreshToken은 Cookie에 저장을 하였다.

 

쿠키에 저장하는 방법은 react-cookie 라이브러리를 사용하여 저장을 하였다.

 

import { Cookies } from 'react-cookie';

const cookie = new Cookies();

export const setCookie = (name: string, value: string, option?: any) => {
  return cookie.set(name, value, { ...option });
};

export const getCookie = (name: string) => {
  return cookie.get(name);
};

export const removeCookie = (name: string) => {
  return cookie.remove(name);
};

util함수로 따로 파일을 지정하여 이렇게 코드를 작성해 저장, 가져오기, 삭제 기능을 할 수 있게 작성을 해놓았다.

 

그 후 로그인 성공 후 서버에서 RefreshToken을 넘겨주면 저장을 하기 위해

      setCookie('refreshToken', data?.refreshToken, { path: '/', secure: true });

 

이렇게 작성을 하였는데

 

로컬환경에는 제대로 저장이 되던 쿠키가 배포 후 저장이 되지 않는 문제가 생겼다.

 

해결하기 위해 구글링을 해본 결과!

 

secure 옵션을 true로 하였는데 https로 통신을 하지 않았기 때문이다.

현재 사용하고 있는 것은 http였기 때문에 동작하지 않은 것이다.

 

그 후 코드를 이렇게 변경하였더니

      setCookie('refreshToken', data?.refreshToken, { path: '/' });

 

 

잘 작동이 되었다.

참고

https://codelist.tistory.com/78

[AWS, Node.js, Vue.js] 배포 후 쿠키 문제