카카오 로그아웃 API 구현하기 : (해결!) 왜 로그아웃이 안되냐고오오 + fetch와 await

최근에 너무 슬픈 일이 있었다. 지금도 믿겨지지 않아 멍한 상태를 반복하는 듯하다.

부디 그 일이 코딩을 손 놓는 합리적인 이유로 쓰이게 하고 싶지 않아 손을 움직였다. 머리가 잘 돌아가지는 않지만...

 

 

그저 이해한 건 카카오 로그아웃 기능을 만들기 위해서는

• 프론트엔드에서는 서버에서 액세스코드를 전달받아 로컬스토리지에 저장을 했다가(로그인할 때? 프론트에서) 로그아웃 함수에 로컬스토리지에서 액세스코드를 삭제해주는 방식 + 로그아웃 API에서도 액세스토큰을 이용하여 카카오 로그아웃 API 주소로 요청을 해야 함
• 백엔드 서버에서는 로그아웃 API에서 세션, 쿠키를 삭제하는 방식

이런 방식이 있다는 것.. 프론트 방법은 좀 더 찾아봐야 알 것 같지만.

 

 

나는 후자를 택했다. 처음에는 프론트에서도 액세스 토큰을 로컬스토리지에 저장을 꼭 해야하는 줄 알고 삽질을 많이 했었는데 내 짧은 생각에는 백엔드 서버에서 액세스코드와 세션, 쿠키를 삭제?하는 방식으로도 해결이 가능하지 않을까 싶었다.

아직 해결이 되지 않았기에 과거형이지만 해결해야 한다.

 

 

---

 

해결중 코드

server.js

/* 카카오 ID 로그아웃 API  */
  app.post('/api/users/logout', async (req, res) => {
    const accessToken = req.session.access_token;

    if (!accessToken) {
        return res.status(400).json({ message: '액세스 토큰이 없습니다.' });
    }

    try {
        await axios.post('https://kapi.kakao.com/v1/user/logout', {}, {
            headers: {
                'Authorization': `Bearer ${accessToken}`
            }
        });


    // 카카오 로그아웃 성공하면 세션 삭제
    req.session.destroy((err) => {
      if (err) {
        return res.status(500).json({ message: '로그아웃: 세션 삭제 중 오류 발생' });
      }

      // 쿠키 삭제
      res.clearCookie('kakao_session');  //기존에 설정했던 세션 쿠키명으로 삭제

      return res.status(200).json({ message: '로그아웃: 쿠키 삭제 성공!' });
    });
  } catch (error) {
    console.error('카카오 로그아웃 오류:\n', error.response?.data || error.message);
    return res.status(500).json({ message: '카카오 로그아웃 실패...' });
  }
  
});

 

 

MyPage.js 일부

async function btnKakaoLogout () {
    //const accessToken = localStorage.getItem('kakao_access_token', accessToken);

      try {
        const response = await fetch('/api/users/logout');

        if (response.ok) {
            console.log('🧡 서버 로그아웃 성공!');
            //localStorage.removeItem('kakao_access_token', accessToken);
            alert('로그아웃 되었습니다!');
            navigate('/');
        } else {
            console.error('카카오 로그아웃 실패...');
            alert('로그아웃에 실패하였습니다.')
        }
    } catch (error) {
        console.error('⛔ 카카오 로그아웃 에러: \n', error);
    }

  }

로컬스토리지 관련 주석은 남겨두면 도움이 될 수도 있으니 아직 지우지 않았다.

콘솔에서는    🧡 서버 로그아웃 성공!  이 문구도 뜨고, alert와 네비게이트까지 잘 된다.

 

근데 문제는 홈으로 다시 돌아가서 user 아이콘을 누르면 로그인된 상태가 남아있다.

이걸 어떻게 해결할지가 고민이다..

 

 

 

---

 

 

25/02/23

해결!

 

 

해결코드

Mypage.js만 수정

async function btnKakaoLogout () {
    //const accessToken = localStorage.getItem('kakao_access_token', accessToken);

    try {
      const response = await fetch('http://localhost:5000/api/users/logout', {
          method: 'POST',  
          credentials: 'include',
      });

      const result = await response.json();
      console.log('로그아웃 응답:', result);

      if (response.ok) {
          alert('로그아웃 되었습니다!');
          window.location.href = '/';
      } else {
          alert('로그아웃에 실패하였습니다.' + result.message);
      }
    } catch (error) {
        console.error('react 로그아웃 요청 실패:', error);
    } 

  }

 

 

 

원인과 해결

try {
        const response = await fetch('/api/users/logout'); << 여기 때문.
        
        
        (수정)
        const response = await fetch('http://localhost:5000/api/users/logout',

fetch의 url을 정확하게 적지 않아서.

 

만약에 (위/아래 중에) 위와 같이 쓰면 리액트 포트 번호로 요청을 보내기 때문에 백엔드 서버 쪽으로 요청이 가지 않는다.

어쩐지... 백엔드 쪽 로그아웃 api에 쓴 에러 콘솔이 실행도 안 되더라.

url을 포트번호 포함해서 정확하게 써주거나, 프록시 설정을 해서 위처럼 쓰거나 해야 한다.

 

 

프록시 설정:

package.json에서 프록시를 설정해주면  fetch('/api/users/logout')  이렇게 작성해도 5000포트에 가서 해당 api 요청이 보내진다.

{
  "proxy": "http://localhost:5000"
}

 

 

 

---

 

 

fetch와 await

전에 fetch는 Promise 기반의 콜백함수라고 정리해놓던 것을 다시 읽어보며, await이 적용된 fetch와 비교해보자.

 

2025.01.07 - [리액트로 웹 개발 A to Z] - 카카오 로그인 API 구현하기 : 서버와 클라가 요청하고 응답 받는 원리 (with. fetch와 then은 한 팀)