[Axios] Axios Interceptors 사용법

📌 Axios Interceptors ?

Axios Interceptors는 axios의 then 또는 catch로 처리 되기 전에 요청과 응답을 가로챌 수 있다.

현재 진행하고 있는 영화 프로젝트의 리팩토링 과정에서 Axios Interceptors를 사용하기로 했다.

 

Axios Interceptors를 사용할 경우,

• 인증 토큰 관리 : 요청 인터셉터에서 access token의 유효함을 확인하고, header에 실어 보내는 작업을 함
• 중복 코드 감소 : 요청과 응답을 처리하기 전에 공통적으로 적용되어야 하는 로직 중앙화
• 전역 오류 처리 : 모든 요청 및 응답에 대해 일관된 오류 처리 구현

 

📌 적용 코드

request : 요청을 보내기 전에 사용

axios.interceptors.request.use(async (config: any) => {
  if (config.private) {
    await fnAuthCheck()
    config.headers.Authorization = `Bearer ${access_token}`
  }

  return config
}, (error) => {
  // request가 error 났을 시
  return Promise.reject('request error : ' + error)
})

여기서 config는 Axios 요청 설정 객체이다. 이번 프로젝트에선 개인적으로 설정을 추가해서 사용하여 type을 any로 주었다😅

따로 변경 사항이 없다면 Axios에서 제공하는 AxiosRequestConfig type을 사용하면 된다.

 

request 전에 access token이 유효한지 확인하고,

유효하지 않다면 다시 토큰 재발급을 요청하는 로직이 들어있는 fnAuthCheck 함수를 실행한다.

그 뒤에 header에 access token을 실어서 Axios 요청을 하게 되는 과정이 들어있다.

 

interceptors에 async/await를 넣지 않을 경우

fnAuthCheck 함수 실행이 끝나기 전에 response interceptors 코드를 읽어서 원하는 대로 동작하지 않는 문제가 있었다.

따라서 동기적으로 코드를 실행하도록 하기 위해 async/await를 추가하였다.

 

response : 응답을 받기 전에 사용

axios.interceptors.response.use(
  res => res,
  async err => {
    if (err.response.data.errorCode === "INTERNAL_SERVER_ERROR" || err.response.data.errorCode === "EXPIRED_TOKEN") {
      sAlert({
        html: '로그인 대기 유효 시간이 만료 되었습니다.<br>다시 로그인 시도해 주시기 바랍니다.',
        didClose: () => {
          kakaoLogout()
        }
      })
    } else {
      sAlert({
        text: err.response.data.errorMessage ? err.response.data.errorMessage : err.response.data.message,
        icon: 'error'
      })
    }

    return 'FAIL'
  }
)

response interceptors에는 에러 핸들링을 하도록 하였다.

refresh token 만료 시 나는 에러가 발생했을 경우 로그아웃 시키는 로직과,

그 이외의 에러가 났을 경우 sAlert이라는 sweetAlert을 사용한 공통함수를 실행하여 에러 메세지를 보여주는 과정이 들어있다.

 

---

기존 코드를 Axios Interceptors를 통해 리팩토링하니 코드가 훨씬 간결해졌고,

에러 핸들링 같은 코드가 한 곳에서 관리되니 디버깅 시에도 편리할 것 같다!