[React] Axios 인터셉터 사용법

 

 

 

Axios interceptor와 Refresh Token

---

axios 공식문서에 따르면 interceptor는 api 요청에서 then이나 catch로 처리되기 전에 응답을 가로챌 수 있도록 하는 것이다.

 

프로덕트에서 로그인 시에만 가능한 행동들의 경우 header에 athorization : token 옵션을 함께 보내야한다.

이때 토큰이 만료되면 서버에서 토큰 만료로 인한 오류응답을 준다.(보통 401이나 403이 토큰 만료 오류이다)

 

토큰 탈취 문제를 피하고자 엑세스 토큰의 유효시간은 짧게 설정해두고 리프레시 토큰을 통해 엑세스 토큰을 재발급 받아야하는데 서비스를 이용하는 유저입장에서 반복적으로 401에러를 보는 것은 굉장히 불편한 일이다.

 

따라서  401에러가 나오면 유저가 보지 못하게 중간에서 가로채 리프레시 토큰으로 새 엑세스토큰을 발급받아 진행중이던 요청을 완료하는 방법을 알아볼 것 이다.

 

 

이때 axios interceptor를 이용하면 된다.

axios interceptor는 api 요청을 보낼 때 가로채는 axios.interceptors.request(클라이언트 -> 서버)와 api 응답을 받을 때 가로채는 axios.interceptor.response(서버 -> 클라이언트)가 있다.

 

우리는 401 응답이 올때의 로직을 추가해야하므로 아래 axios.interceptors.response.use()를 활용해야 한다.

 

// 요청 인터셉터 추가하기
axios.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

 

 

 

 

 

참고

https://axios-http.com/kr/docs/interceptors

https://s0ojin.tistory.com/44