로그아웃 코드 관련해서 질문드립니다

맛집 지도앱 만들기 (React Native + NestJS)

[3-8] React Query 도입(2) - 로그인 연동하기

작성

수정됨

 function useLogout(mutationOptions?: UseMutationCustomOptions) {
    return useMutation({
        mutationFn: logout,
        onSuccess: () => {
            console.log("before storage empty: ", getEncryptStorage(storageKeys.ACCESS_TOKEN));
            removeHeader('Authorization');
            removeEncryptStorage(storageKeys.REFRESH_TOKEN);
            queryClient.resetQueries({queryKey: [queryKeys.AUTH]});
            console.log("storage empty: ", getEncryptStorage(storageKeys.ACCESS_TOKEN));
        },
        ...mutationOptions,
    });
}

이게 강사님께서 쓰신 로그아웃 코드인데 removeEncryptStorage를 비동기 함수로 구현하셨었습니다.

제가 로그아웃 버튼을 누르는데 'localhost:제가 만든 서버 포트':auth/logout 이런식으로 클라이언트에 요청했을 때

로그를 살펴보니깐
LOG Access token after remove: {"_h": 0, "_i": 0, "_j": null, "_k": null}

LOG Access token removed: false

LOG isLogIn: false //이건 Navigation/root/RootNavigator.tsx에 isLogin값이 false인지 true인지 확인하기 위해 콘솔로그 찍음

이런식으로 출력되었었습니다.

로그아웃 직후에 바로 로그인이 된 상태로 작동했습니다.

removeEncryptStorage는 비동기 함수이기 때문에 await 없이 호출되면 로그아웃 관련된 비동기 작업이 완려되기 전에

onSuccess내의 코드들이 실행된거 같습니다.

function useLogout(mutationOptions?: UseMutationCustomOptions) {
    return useMutation({
        mutationFn: async () => {
            removeHeader('Authorization');
            await removeEncryptStorage(storageKeys.REFRESH_TOKEN);
        },
        onSettled: () => {
            // 관련 쿼리 무효화하여 캐시 초기화
            queryClient.invalidateQueries({queryKey: [queryKeys.AUTH]});
        },
        ...mutationOptions
    });
}

그래서 이런식으로 await async로 토큰 제거 작업이 완료된 후 까지 기다리게 만들어서 하니깐 로그아웃이 잘 작동되고

서버 내에 db랑 연결된 users 테이블 내의 refresh_token도 사라진걸 확인할 수 있었습니다.

제가 혹시 놓친 부분이 있었는지 왜 이런 차이가 나는지 정확한 이유를 몰라서 질문 남깁니다.

react-native typescript nestjs react-query zustand

답변 1

Kyo

지식공유자

직접 서버를 만드셨고 거기서만 로그아웃이 된다는 말씀인가요?? 그리고 아래써주신 코드는 mutationFn에서 헤더와 스토리지만 지워주고 계시는데, db가 지워지나요?

최상현

질문자

function useLogout(mutationOptions?: UseMutationCustomOptions) {
    return useMutation({
        mutationFn: async () => {
            const response = await axiosInstance.post('/auth/logout');  // 로그아웃 요청을 서버에 먼저 보냄
            console.log('Logout response:', response.data); // 요청이 성공했는지 확인

            removeHeader('Authorization');// 요청 성공 후 헤더와 스토리지 정리
            await removeEncryptStorage(storageKeys.REFRESH_TOKEN);
            queryClient.resetQueries({queryKey: [queryKeys.AUTH]});
        },
        onSettled: () => {// 관련 쿼리 무효화하여 캐시 초기화
            queryClient.invalidateQueries({queryKey: [queryKeys.AUTH]});
        },
        ...mutationOptions
    });
}

아 죄송합니다 제가 잘못 올렸습니다
현재 이런 코드로 로그아웃을 구현하였고 로그아웃 시에 db의 리프레시 토큰이 삭제가 된걸 확인했습니다

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

로그아웃 코드 관련해서 질문드립니다