[3-8] 로그아웃 관련 문의 드립니다

function useLogout(mutationOptions?: UseMutationCustomOptions) {
    return useMutation({
        mutationFn: async () => {
           await axiosInstance.post('/auth/logout');  // 로그아웃 요청을 서버에 먼저 보냄

            removeHeader('Authorization');
            await removeEncryptStorage(storageKeys.REFRESH_TOKEN);
            queryClient.resetQueries({queryKey: [queryKeys.AUTH]});
        },
      
        ...mutationOptions
    });
}

안녕하세요 강사님 강사님의 리액트 네이티브 강의를 보면서

직접 자신만의 리액트 네이티브 프로젝트도 직접 다뤄보면서 하고 있는 학생입니다.

https://github.com/Dongrang072/carPoolTeamProject-server

이게 현재 제가 작성하고 있는 로컬 서버의 코드이고

https://github.com/Dongrang072/carpoolTeamProject

이게 프론트의 코드입니다

기존의 로그아웃 코드가 잘 작동하지 않아서, 코드를 이런식으로 고치고 난 후에 실행했는데
로그아웃으로 네비게이터가 authStack에 관련된 화면을 다시 보여주고 난 후에 이후 로그인까지는 의도적으로 되지만
로그인을 다시 실행하면 이전에 스토리지가 다 지워지지 않았는지 계정을 바꿔서 로그인 할 경우

전에 있던 계정으로 로그인이 되는 현상이 발생하고 있습니다.

분명 헤더와 스토리지를 지움으로서 accessToken과 refreshToken 둘 다 지운걸로 생각했는데 이런 일이 생기는 이유가 궁금합니다.

로그아웃 엔드포인트 호출까지 진행되고 다시 화면이 랜더링 되어서 저는 괜찮았다고 생각했는데 이후 storage가 다 지워지지 않는 것이 원인인것 같습니다

안녕하세요, 인프런 AI 인턴입니다.

최상현님께서 제시한 문제는 로그아웃 후 토큰이 완전히 제거되지 않아 발생하는 것으로 보입니다. 이 문제를 해결하기 위해서는 removeEncryptStorage 및 removeHeader 함수가 제대로 작동하는지, 그리고 다른 상태 관리 로직에서 이와 관련된 데이터가 남아 있는지 확인해볼 필요가 있습니다.

로그아웃 프로세스에서 발생할 수 있는 일반적 문제는 비동기 작업이 적절히 처리되지 않거나, 상태 관리 라이브러리와의 연동이 완전하지 않는 것입니다. 다음은 문제 해결에 도움이 될 만한 몇 가지 검사 항목입니다:

비동기 작업의 완료 여부 확인: 비동기 함수에서 await 키워드를 사용했지만, 적절히 대기하고 있는지 확인하세요. 특히 removeEncryptStorage, removeHeader 호출이 완전히 끝나기 전에 컴포넌트가 다시 렌더되거나 네비게이션 되는 경우, 토큰이 남아 있거나 갱신되는 문제가 생길 수 있습니다.
상태 변화 감지: removeEncryptStorage 및 removeHeader 함수들이 정확히 액세스 및 리프레시 토큰을 제거하는지를 콘솔 로그 등을 통해 확인해보세요. 또, 상태 관리 라이브러리(zustand 등)를 사용 중이라면 관련 상태가 올바르게 업데이트 되는지 검토해볼 필요가 있습니다.
Query Client 초기화: queryClient.resetQueries() 와 같이 리셋 함수가 제대로 동작하는지 재확인해보세요. 만약 리셋이 제대로 이루어지지 않는 경우에 대비해, queryClient.clear() 같은 메소드도 시도해볼 가치가 있습니다.
캐시 관리: 로그아웃 시점에서 클라이언트 측 캐시에 남아 있는 모든 데이터를 제대로 제거했는지도 확인해야 합니다. Query Client 뿐만 아니라 다른 캐시 저장소가 연관되어 있진 않은지도 점검해보세요.

유사한 문제에 대해 더 많은 정보를 확인할 수 있는 게시글을 추천드립니다:
- 로그아웃 관련해서 질문 있습니다.
- 캐싱관련 질문있습니다.

이 게시물들에서는 react-query 나 기타 상태 관리 이슈와 관련된 다양한 접근 방법을 소개하고 있으니 참고하시면 좋을 것 같습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변