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

박현민님의 프로필 이미지

작성한 질문수

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

refreshToken 적용 이후

24.06.08 23:35 작성

·

106

·

수정됨

0

포트폴리오를 만드는중에 refreshToken을 이용해서 로그인 데이터를 저장한 후에 생긴 문제입니다.

게시글 조회 페이지에서 새로고침을 하면 fetchBoards와 fetchBoardCount 요청이 2번씩 나가고

뒤에오는 요청은 canceled 되는데 이런 경우는 어떤거 때문에 생기는건지 궁금합니다.

localStorage로 되돌리면 다시 오류없이 잘 동작합니다

refreshToken을 사용하고 저 오류가 생기면 게시글 등록후에 간헐적으로 새로고침을 해야 refetch되는거 같습니다.

오류333.png

답변 2

1

노원두님의 프로필 이미지
노원두
지식공유자

2024. 06. 12. 12:37

안녕하세요! 현민님!

새로고침시 기존에 저장되어있던 accessToken이 사라지게 되므로 refreshToken으로 accessToken을 다시 받아오는 과정이 발생하게 됩니다!(왜 사라지는지는 수업때 다뤘었죠!^^)


따라서, 다음의 상황을 먼저 의심해 볼 수 있겠는데요!
accessToken을 받고난 이후에 해당 내용을 apollo-setting에 적용하는 과정에서 하위 컴포넌트들이 리랜더링이 되면서 기존에 실행했던 fetchBoards가 재실행 되었을 가능성이 있을 것 같아요!
해당 부분을 한 번 점검해 보세요!

박현민님의 프로필 이미지
박현민
질문자

2024. 06. 13. 00:31

여러가지를 시도해봤는데 getAccessToken을 useRecoilValueLoadable로 실행시키지 않으면 오류가 발생하지 않는거 같습니다 useRecoilValueLoadable이 발생시키는 문제가 있나요??

1

인프런 AI 인턴님의 프로필 이미지

2024. 06. 10. 23:41

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

님의 문제는 refreshToken을 사용함으로써 생긴 네트워크 요청 관련 이슈로 보입니다. 보통 하나의 요청이 취소되고 다른 한 개가 성공하는 경우, 이는 요청의 타이밍이나 상태 관리에 문제가 있을 때 발생할 수 있습니다. 예를 들어, 로그인 상태를 갱신하는 과정에서 발생한 race condition 때문에 일부 요첽이 취소될 수 있습니다. 또한, refreshToken을 사용하여 인증 상태를 갱신하면서 생기는 비동기 처리 중, 올바르지 않게 이전 요청이 취소되거나, 갱신된 토큰을 이용한 요청이 제대로 이루어지지 않는 경우가 생길 수 있습니다.

이러한 문제를 해결하기 위해서는 다음과 같은 방법을 고려해볼 수 있습니다:
1. 인증 상태 관리 로직 확인: 인증 토큰을 갱신하는 로직이 정확히 구현되었는지, 그리고 이 로직이 요청이 충돌하지 않도록 동기적으로 관리되는지 확인합니다.
2. 중복 요청 방지: 로그인 상태를 확인하거나 갱신하는 과정에서 중복하여 같은 요청이 발생하지 않도록 처리 로직을 추가합니다.
3. 에러 핸들링 및 재시도 로직 구현: 요청이 취소되거나 실패했을 때 이에 대한 적절한 에러 핸들링과 필요한 경우 재시도할 수 있도록 로직을 구축합니다.

localStorage로 돌아갔을 때 문제가 해결되는 것은, 인증 상태 관리에 있어서 비동기 처리 이슈가 없기 때문일 수 있습니다. 현재 구현하고 있는 인증 처리 로직을 재검토하고, 필요하다면 리프레시 토큰 관리 방식을 최적화할 필요가 있어 보입니다.