• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    해결됨

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

24.05.25 16:24 작성 조회수 199

1

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

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

onSuccess 함수 로직에 있는

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

이 코드로

getAccessToken ( /auth/refresh ) api 를

요청하고 있습니다.

 

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

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

 

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

답변 1

답변을 작성해보세요.

1

Kyo님의 프로필

Kyo

지식공유자

2024.05.25

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

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

Kyo님의 프로필

Kyo

지식공유자

2024.05.25

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

정휘학님의 프로필

정휘학

질문자

2024.05.25

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};
}

 

 

Kyo님의 프로필

Kyo

지식공유자

2024.05.25

회원가입이 잘된다면 로그인이나 리프레시로직이 문제일텐데, 로그인쪽과 refreshtoken유틸함수에도 문제가없다면, 앱을 삭제하고 다시 빌드도해보세요

정휘학님의 프로필

정휘학

질문자

2024.05.25

function useLogin()

getAccessToken()

아래 이미지는 로그인 버튼 눌렀을 때 부터 나타나는 로그이며 getAccessToken 함수에서 콘솔에 refreshToken 값이 찍히는 부분을 빨간색 박스로 표시해둔 로그 이미지입니다.

정휘학님의 프로필

정휘학

질문자

2024.05.25

강사님 해결은 했습니다.
getAccessToken() 함수를 위 이미지 처럼 refreshToken 값을 디코딩 두번 돌려서 해결은 했는데...

Kyo님의 프로필

Kyo

지식공유자

2024.05.25

네 로그에찍히는 토큰을 보면 parse하거나 stringify할때 뭔가 문제가 있던것같네요.

정휘학님의 프로필

정휘학

질문자

2024.05.25

도와주셔서 감사합니다!

채널톡 아이콘