Axios에서 intercepter는 then이나 catch로 처리되기 전에 요청이나 응답을 가로챌 수 있다. 따라서, 이를 다양한 방식으로 활용할 수 있는데 interceptors.request.use()를 사용하여 요청할때 header에 token을 실어서 요청할 수도 있고, interceptors.response.use()를 사용하여 에러처리를 하거나 refreshToken을 통해 유효한 token을 재발급 받을 수도 있다.
axiosInstance.interceptors.response.use(
response => {
return response;
}, // 에러가 아니면 return
error => {
const {
config,
response: { status },
} = error; // 에러가 있으면 status 변수 설정
const originalRequest = config;
if (status === 401) {
//에러 status가 401(Unauthorized)이면 유효한 token을 발급받는 로직 실행
const refreshToken = sessionStorage.getItem('refresh_token');
axios({ //refreshToken을 보내고 유효한 accessToken을 받는 POST요청
method: 'post',
url: `${baseURL}/auth/refresh`,
data: { refreshToken },
}).then(response => {
const accessToken = response.data.token;
sessionStorage.setItem('access_token', accessToken);
//새로 발급받은 accessToken을 sessionStorage에 저장
originalRequest.headers = { access_token: accessToken };
// 기존 요청에서 headers에 새로 받은 accessToken으로 교체
return axios(originalRequest);
//재발급 accessToken으로 앞에서 요청 실패한 요청 다시 보냄
});
}
return Promise.reject(error);
}
);