개발자
axios 여러개일때 interceptor 질문드립니다.
axios 인스턴스를 만들어 interceptor의 response에서 로직을 처리하려고 합니다. JWT가 만료되었다는 응답을 가로채서 alert를 띄우고 로그인 화면에 이동을 시켰습니다. 그런데 한 화면에 JWT를 사용한 axios요청이 여러개이면 alert가 여러번 뜨게 됩니다. 가로채서 처리하더라도 요청 자체가 여러개이기 때문인데요, alert를 한번만 띄우게 하는 방법이 있을까요~?
답변 2
인기 답변
프론트엔드 적인 답변으로는 만약 만료가 된다면 alert를 띄우기 보단 저장된 JWT를 삭제한 후 페이지를 로그인 페이지 (혹은 메인 페이지)로 리다이랙션 하는것이 자연스러울 것 같습니다. 이 때 시각적인 효과를 주신다면 리다이랙션 후 해당 페이지에서 JWT의 삭제나 모달 등을 띄우는 방식으로 작성하시면 될 것 같습니다. 말씀주신 alert가 여러번 뜨는 것을 막는 방법은 window.alert로 재정의하여 로직을 추가하던지 등 여러가지 방법이 있을 것 같지만 그닥 추천되는 방법은 아닙니다 다음 방법과 같이 Flag를 추가하던지 setTimeout으로 일정 시간동안 한번만 발생하게 할 수 있습니다 (자세한 방식은 이벤트를 다루는 디바운스와 쓰로틀링 쪽을 한번 검색해보시면 됩니다.)
1let isAlertShown = false;
2
3window.alert = function(message) {
4 if (!isAlertShown) {
5 originalAlert(message); // 원래의 alert 함수를 호출합니다.
6 isAlertShown = true; // 플래그를 true로 설정합니다.
7 }
8};
9
10const originalAlert = window.alert; // 원래의 alert 함수를 저장합니다.김선진
작성자
소프트웨어 엔지니어 • 2024년 01월 03일
코드 첨부까지.. 친절하고 자세한 설명 감사합니다.
https://velog.io/@ek615/axios-interceptors-%EC%A0%95%EB%A6%AC 이거 도움 되실지 모르겠지만 참고 링크 남겨봐요
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 01월 02일
이러한 문제를 해결하기 위해선 alert를 중복으로 띄우지 않도록 관리하는 로직이 추가로 필요합니다. 서버로부터 JWT 만료 응답을 받아 이를 가로챈 후, 아래의 방법을 적용할 수 있습니다. 1. **Debouncing**: 한 화면에 axios 요청이 여러 개 있다면, 짧은 시간 내에 동일한 경고창을 띄우는 행동을 기다렸다가 한번만 실행하는 방식입니다. Lodash와 같은 라이브러리에서 제공하는 debounce 함수를 사용하면 쉽게 구현할 수 있습니다. ```js var showExpiredAlert = _.debounce(function() { alert("JWT expired"); }, 1000); axios.interceptors.response.use( response => response, error => { if (error.response.status === 401) { // assuming this is where you check JWT expiration showExpiredAlert(); } throw error; } ); ``` 2. **상태 변수 사용**: 상태를 보관할 변수를 하나 선언하고, 알림이 이미 표시되었는지 체크하여 중복 알림 현상을 방지합니다. ```js let isAlertShown = false; axios.interceptors.response.use( response => response, error => { if (error.response.status === 401 && !isAlertShown) { isAlertShown = true; alert("JWT expired"); } throw error; } ); ``` 항상 에러 발생 후 `isAlertShown`을 다시 false로 설정하는 로직이 필요합니다. 로그인 후처럼 JWT가 새로 발급되는 상황에서 이를 리셋하면 될 것 같습니다. 아무튼, 해당 방법들은 중복된 alert 호출을 막기 위한 예시적인 것들이며, 실제 프로젝트의 상황에 따라 가장 적합한 방법을 선택해야 합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!