[항해 실전 프로젝트][React] 로그아웃 기능 구현하기

어마어마한 삽질과 함께 로그아웃 기능 구현에 성공했다. 아래 로그아웃 버튼을 누르면 쿠키가 삭제되고 로그인 페이지로 리다이렉트된다.

문제 상황

로그아웃 실행 시 서버에서 쿠키를 삭제하고, 클라이언트로 "로그아웃 완료"라는 메시지를 반환한다. 즉, 서버 로직에는 문제가 없다. 하지만 클라이언트에서 로그아웃이 정상적으로 실행되지 않는다. ProtectedRoute를 설정하였기 때문에 로그아웃을 하면 특정 페이지로 접속이 불가능하고 로그인 페이지로 리다이렉트되어야 하는데 특정 페이지 접속이 가능하다.

삽질 기록👷⛏️

1. 쿠키의 만료 날짜를 과거로 설정하여 쿠키 삭제

// MyPage.jsx
  const logoutHandler = async () => {
    try {
      const responseData = await logout();
      if (responseData) {
        document.cookie = "MM=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=honeyitem.shop;";
        navigate('/login');
      }
    } catch (error) {
      console.error(error);
    }
  };

2. 페이지 강제 새로고침하여 모든 상태 초기화

// MyPage.jsx
  const logoutHandler = async () => {
    try {
      const responseData = await logout();
      if (responseData) {
        document.cookie = "MM=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=honeyitem.shop;";
        window.location.reload(true);
      }
    } catch (error) {
      console.error(error);
    }
  };

3. 로컬스토리지 및 세션 스토리지 초기화

// MyPage.jsx
  const logoutHandler = async () => {
    try {
      const responseData = await logout();
      if (responseData) {
        document.cookie = "MM=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=honeyitem.shop;";
        localStorage.clear();
		sessionStorage.clear();
        window.location.reload(true);
      }
    } catch (error) {
      console.error(error);
    }
  };

4. react-cookie 라이브러리 사용하여 쿠키 삭제

// MyPage.jsx
  import { useCookies } from 'react-cookie';  
  
  const [cookies, setCookie, removeCookie] = useCookies(['MM']);

  const logoutHandler = async () => {
    try {
      const responseData = await logout();
      if (responseData) {
        document.cookie = "MM=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=honeyitem.shop;";
        localStorage.clear();
		sessionStorage.clear();
        removeCookie('MM');
        window.location.reload(true);
      }
    } catch (error) {
      console.error(error);
    }
  };

이 외에도 하루 종일 자잘한 삽질을 많이 했으나, 여기까지만 적는다...🥲

해결🎉

문제의 원인은 api 호출에 있었다!
"로그아웃 완료"라는 메시지를 받았기 때문에 api 호출에는 문제가 없을 줄 알았는데 아니었다.

수정 전

export const logout = async () => {
  const response = await api.post('/auth/logout', {
    withCredentials: true,
  });

  return response.data;
};

서버로 아무런 데이터도 전송하지 않는 경우 빈 객체 {}를 선언해줘야 한다!

수정 후

// auth.js
export const logout = async () => {
  const response = await api.post(
    '/auth/logout',
    {}, // 바로 이부분 추가
    {
      withCredentials: true,
    }
  );

  return response.data;
};

GPT 답변 참고💬

axios와 같은 라이브러리를 사용하는 경우, PUT 요청을 보낼 때 본문이 없으면 에러가 발생할 수 있습니다. 이런 경우에 빈 객체 {}를 본문으로 보내는 것은 에러를 방지하는 방법 중 하나입니다.
꼭 빈 객체를 보내야 하는지 여부는 사용하는 API 클라이언트 라이브러리와 서버의 설정에 따라 다릅니다. 문제가 발생하는 경우, 빈 객체를 추가해주는 것은 간단한 해결책이 될 수 있습니다.