Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Refactor] 401시 리프레시 토큰을 통한 재발급 인터셉터/미들웨어 수정 #466

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from

Conversation

wuzoo
Copy link
Contributor

@wuzoo wuzoo commented Feb 12, 2025

해당 이슈 번호

closed #465


체크리스트

  • 🔀 PR 제목의 형식을 잘 작성했나요? e.g. [feat] PR을 등록한다.
  • 💯 테스트는 잘 통과했나요?
  • 🏗️ 빌드는 성공했나요?
  • 🧹 불필요한 코드는 제거했나요?
  • ✅ 컨벤션을 지켰나요?
  • 💭 이슈는 등록했나요?
  • 🏷️ 라벨은 등록했나요?
  • 🙇‍♂️ 리뷰어를 지정했나요?

💎 PR Point

인터셉터/미들웨어 로직 수정해주었습니다.
일단 refreshToken을 로컬스토리지로 받게 되면서, 이에 대한 저장과 인터셉터/미들웨어에서의 재발급 + 이후 추가 요청 로직을 구현하였습니다.

미들웨어에서는 onResponse 콜백을 통해서 응답 상태코드가 401일때 reissue 요청을 보내도록 하고, 그게 아니라면 기존의 응답으로 반환하도록 하였습니다.

  1. msw 핸들러를 추가해서 401 반환 시 리이슈 API 성공, 그리고 accesstoken 변경되는 것을 확인하였고
  2. 변경된 이후 return fetch를 통해 기존의 요청을 한 번 더 전송하도록 하여 재요청되는 것을 확인하였습니다.

Copy link

🚀 Storybook 확인하기 🚀


return axiosInstance(originRequest);
} catch (error) {
console.log(error);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

내가 콘솔 발견 !

Copy link
Contributor

@rtttr1 rtttr1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다!
한 가지 궁금한 점은 미들웨어는 어느 시점에 동작하는 것인가요??

@wuzoo
Copy link
Contributor Author

wuzoo commented Feb 13, 2025

미들웨어는 axios, ky와 같은 HTTP 송수신 라이브러리에서의 인터셉터와 비슷한 역할을 해요. 공식문서에 따르면 특정 fetch의 요청, 응답, 혹은 에러 등을 개발자가 조작 가능하도록 제공하는 콜백이라고 하네요 !
기존 인터셉터의 역할은 요청 혹은 응답이 완료되기 전에, 이를 가로채어 개발자가 원하는 특정 작업을 수행하게 해주는 것이였어요. 미들웨어 또한 비슷합니다 !

Copy link

🚀 Storybook 확인하기 🚀

Copy link

🚀 Storybook 확인하기 🚀

Copy link
Member

@namdaeun namdaeun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다 !!!!

Comment on lines -16 to -17
withCredentials: true,

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요거 왜 없애준 거에요 ?

Copy link
Contributor

@Bowoon1216 Bowoon1216 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
드디어 리프레시 토큰?! 기대됩니다 역시 리드님 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

리프레시 토큰 로직/ 로그인 정상화
4 participants