로그인 api 요청 이후 getAccessToken ( /auth... - 인프런

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

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

로그인 api 요청 이후 getAccessToken ( /auth/refresh ) api 401 error

해결된 질문

작성

449

안녕하세여 강사님 강의 잘 듣고 있습니다.

다름이 아니라 회원가입 및 로그인 api 요청 성공시

onSuccess 함수 로직에 있는

queryClient.refetchQueries({
    queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN],
});

이 코드로

getAccessToken ( /auth/refresh ) api 를

요청하고 있습니다.

여기서 문제는 getAccessToken 요청시 401 error 가 발생하고 있습니다.

DB 에 회원가입으로 생성된 유저 데이터는 잘 생성된 상태이고 오타는 없어보입니다. ㅠㅠ 도와주세여

아래 이미지는 log 이미지입니다.

react-native typescript nestjs react-query zustand

답변 1

Kyo

지식공유자

안녕하세요. encryptStorage함수를 어떻게 작성하셨는지 모르겠지만, 강의와 똑같이 하셨다면 getEncryptStorage(key: 'refreshToken'); 이부분이 문제일수 있겠네요. 객체가아닌데 키-값으로 넣으셨는데,

강의에서는 getEncryptStorage('refreshToken'); 이렇게 사용합니다!

Kyo

지식공유자

앗 코드를 다시보니까 key는 직접넣으신게아닌 그냥 에디터가 표시해주는 부분같기도하네요. auth관련 hook은 어떻게 작성하셨나요??

정휘학

질문자

useAuth.ts -> useGetRefreshToken () 코드입니다.

function useGetRefreshToken() {
    const {isSuccess, data, isError} = useQuery({
        queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN],
        queryFn: getAccessToken,
        staleTime: numbers.ACCESS_TOKEN_REFRESH_TIME,
        refetchInterval: numbers.ACCESS_TOKEN_REFRESH_TIME,
        refetchOnReconnect: true,
        refetchIntervalInBackground: true,
    });

    useEffect(() => {
        if (isSuccess) {
            setHeader('Authorization', `Bearer ${data.accessToken}`);
            setEncryptStorage(storageKeys.REFRESH_TOKEN, data.refreshToken);
        }
    }, [isSuccess]);

    useEffect(() => {
        if (isError) {
            removeHeader('Authorization');
            removeEncryptStorage(storageKeys.REFRESH_TOKEN);
        }
    }, [isError]);

    return {isSuccess, isError};
}