axios interceptor.response 로 401에러 처리방법

토큰이 만료되었을 때 API가 무한 호출되는 문제가 발생하는 것으로 보아, `interceptor.response`의 로직이 잘못 작성된 것 같습니다. 일반적으로 당신의 구현 의도는 다음과 같습니다: 1. Axios 요청이 보내지면 response를 intercept. 2. 이때 만약 response 상태 코드가 401인 경우, 즉, 토큰이 만료되었을 경우에 대비하여 백엔드에 새로운 토큰을 요청. 3. 새로운 토큰 받기까지 기다리고 그 토큰을 저장 후 원래의 요청을 재시도. 문제는 step2와 step3에서 일어나는 것 같습니다. 새로운 토큰을 받고 저장하는 과정이 비동기적(asynchronous)입니다. axios를 다시 호출하기 전에 이 과정이 완전히 끝날 때까지 기다려야 합니다. 다음은 Promise와 async/await을 사용해 수정할 수 있는 방법입니다: ```javascript axios.interceptors.response.use( function(response) { return response; }, async function(error) { const originalRequest = error.config; if (error.response.status === 401 && !originalRequest._retry) { originalRequest._retry = true; // getRefreshToken is your function that will call backend API to get new token const refreshToken = await getRefreshToken() // After getting the new token, save it and retry the original request. axios.defaults.headers.common['Authorization'] = 'Bearer ' + refreshToken; return axios(originalRequest); } return Promise.reject(error); } ); ``` 이 코드는 401 상태 코드 오류가 발생했을 때만 원래의 request를 재시도하며, 같은 요청에 대해 한 번만 재시도합니다. 참고로 이 방법은 만료된 토큰을 다루는 일반적인 방법입니다. 그러나 여전히 무한 호출 문제가 해결되지 않는다면, 백엔드의 로직도 확인해볼 필요가 있습니다. 마지막으로 토큰 만료에 대한 핸들링과 재시도 로직을 매 요청에서 처리하는 것보단 별도의 서비스나 훅에 넣어 재사용할 수 있게 관리하는 것이 좋습니다.