프로젝트) 쿠키와 요청 구조화

 

기본적으로 토큰은 리액트 쿠키를 이용하여 저장했습니다.

 

https://www.npmjs.com/package/react-cookie

react-cookie

 

import { Cookies } from 'react-cookie';

const ACCESS_TOKEN = 'token';
const REFRESH_TOKEN = 'refreshToken';
const USER_INFORMATION = 'userInformation';

const cookies = new Cookies();

//토큰 및 정보 저장
export const setACCESS_TOKEN = (token, option = {}) =>
  cookies.set(ACCESS_TOKEN, token, option);
export const setREFRESH_TOKEN = (token, option = {}) =>
  cookies.set(REFRESH_TOKEN, token, option);
export const setUSER_INFORMATION = (userInformation, option = {}) =>
  cookies.set(USER_INFORMATION, userInformation, option);

//토큰 및 정보 가져오기
export const getACCESS_TOKEN = () => cookies.get(ACCESS_TOKEN);
export const getREFRESH_TOKEN = () => cookies.get(REFRESH_TOKEN);
export const getUSER_INFORMATION = () => cookies.get(USER_INFORMATION);

//토큰 및 정보 날리기
export const removeACCESS_TOKEN = () => cookies.remove(ACCESS_TOKEN);
export const removeREFRESH_TOKEN = () => cookies.remove(REFRESH_TOKEN);
export const removeUSER_INFORMATION = () => cookies.remove(USER_INFORMATION);

//로그인 상태 검증을 위한 토큰 유무 확인
export const getALIVE = () =>
  getACCESS_TOKEN() && getREFRESH_TOKEN() && getUSER_INFORMATION();


export const setLogout = () => {
  removeACCESS_TOKEN();
  removeREFRESH_TOKEN();
  removeUSER_INFORMATION();
};

 

처음엔 토큰만 쿠키에 저장하고 유저 정보와 로그인 상태는 리덕스를 이용하여 관리하려 했으나 리덕스는 새로고침시 상태가 초기화되는 문제가 있어 개선이 필요했습니다.

 

이는 redux-persist를 이용하여 새로고침시 상태가 초기화하는 걸 방지할 수 도 있습니다.

https://www.npmjs.com/package/redux-persist

redux-persist

 

하지만 프로젝트 중 이미 많은 상태를 완료한 부분이 있어 새롭게 배우고 적용하기에 두려움이 생겨 토큰을 저장하던 쿠키에 같이 저장하고 토큰이 쿠키에 담겨있는 것으로 로그인 상태를 확인하게 하였습니다.

 

export const getWITH_TOKEN = () => {
  return {
    headers: {
      Authorization: getACCESS_TOKEN(),
      RefreshToken: getREFRESH_TOKEN(),
    },
    withCredentials: true,
  };
};

 

이렇게 새로운 함수를 설정하여 기본적으로 헤더에 토큰을 담게 기본 틀을 만들어

 

  const logoutHandler = () => {
    axios
      .delete(URL_MEMBER_LOGOUT, getWITH_TOKEN())
      .then(() => {
        setLogout();
        navigate(ROUTE_PATH_BASE);
      })
      .catch((error) => {
        const { message } = error;
      });
  };

 

HTTP  요청 시 담을 많을 정보를 간결하게 구조화할 수 있었습니다.