[Fe/#248] token reissuance

[Klomachenko]

🎫 연관 티켓

#248
#239

🙏 작업

• 연결된 토큰 재발급 api를 이용해 토큰 재발급 기능을 구현하였습니다.

💁‍♂️ 어떻게?

api.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    const { config, response: { status } } = error;
    const originalRequest = config;

    if (status === 403) {
      const accessToken = localStorage.getItem('access');
      const refreshToken = localStorage.getItem('refresh');

      try {
        const { data } = await axios({
          method: 'post',
          url: '/members/token',
          data: { accessToken, refreshToken },
        });

        // ... (토큰 업데이트 및 재시도 로직)
      } catch (error) {
        // ... (에러 처리 로직)
      }
    }
  },
);

• api.interceptors.response.use를 사용하여 응답을 설정합니다
• 403 상태코드 발생시 토큰 만료로 간주하고, 재발급을 시도합니다
• axios를이용하여 members/token엔드포인트로 토큰 재발급 요청을 보냅니다.
• 재발급 성공시 받은 새로운 access, refresh 토큰을 로컬 스토리지에 저장합니다
• 기존 요청의 헤더를 새로운 access 토큰으로 업데이트하고, 기존 요청을 재시도합니다.

🙈 PR 참고 사항

토큰 재발급 로직 순서

• 클라이언트에서 서버로 요청
• 서버에서 403 응답 수신
• 토큰 재발급을 위한 재요청
• 새로운 토큰을 받아 로컬 스토리지에 저장
• 기존 요청의 헤더를 업데이트하고 재시도

기존 코드에서 변경사항

• 기존 코드에 useRefreshToken.ts에서 토큰 재발급 로직이 들어가 있었습니다.
  • useRefreshToken은 Hook인데, 해당 Hook은 최상위 컴포넌트에서만 사용이 가능합니다
  • 이를 해결하기 위해 useMutation대신, 일반 api호출로 가져오도록 axios interceptor에서 토큰을 그대로 받아오도록 하였습니다.
• 현재 계층이 Axios -> Api -> ReactQuery 계층인데, 한 단계식 올라가는 건 괜찮지만, 현재 토큰 재발행은 ReactQuery에서 Axios로 바로 올라가고 있습니다. (이는 기능 자체에 문제가 발생합니다)

header 관련

• 현재 header에 bearer accesstoken 만 넣어서 보내주고 있는 상태입니다

originalRequest.headers = {
  'Content-Type': 'application/json',
  Authorization: 'Bearer ' + newAccessToken,
};

• swagger를 보면 referer과 uuid를 같이 담아서 보내주라고 하는데, 해당 부분은 어떻게 처리해야하나요?

토큰 만료 관련

• 토큰 만료가 나야 이걸 어떻게 해볼텐데, 일단 그걸 체크해볼 수 없어서 그냥 403에러 발생시 작동하는 에러코드를 넣어놓았습니다

📸 스크린샷

• 확인 필요.
  • 검증을 위해 토큰 만료시간과 에러코드가 필요합니다

🤖 테스트 체크리스트

• 체크 미완료
• 체크 완료