axios 여러개일때 interceptor 질문드립니다.

프론트엔드 적인 답변으로는 만약 만료가 된다면 alert를 띄우기 보단 저장된 JWT를 삭제한 후 페이지를 로그인 페이지 (혹은 메인 페이지)로 리다이랙션 하는것이 자연스러울 것 같습니다. 이 때 시각적인 효과를 주신다면 리다이랙션 후 해당 페이지에서 JWT의 삭제나 모달 등을 띄우는 방식으로 작성하시면 될 것 같습니다. 말씀주신 alert가 여러번 뜨는 것을 막는 방법은 window.alert로 재정의하여 로직을 추가하던지 등 여러가지 방법이 있을 것 같지만 그닥 추천되는 방법은 아닙니다 다음 방법과 같이 Flag를 추가하던지 setTimeout으로 일정 시간동안 한번만 발생하게 할 수 있습니다 (자세한 방식은 이벤트를 다루는 디바운스와 쓰로틀링 쪽을 한번 검색해보시면 됩니다.)

1
2
3
4
5
6
7
8
9
10
let isAlertShown = false;

window.alert = function(message) {
  if (!isAlertShown) {
    originalAlert(message);  // 원래의 alert 함수를 호출합니다.
    isAlertShown = true;      // 플래그를 true로 설정합니다.
  }
};

const originalAlert = window.alert; // 원래의 alert 함수를 저장합니다.

https://velog.io/@ek615/axios-interceptors-%EC%A0%95%EB%A6%AC 이거 도움 되실지 모르겠지만 참고 링크 남겨봐요