axios interceptor를 사용하여 token 처리하기

SPA 개발을 하다 보면 axios로 통신하는 경우가 많이 있는데 서버와 분리된 환경이다 보니 로그인 정보는 token을 이용해서 처리하는 경우가 많다. 그런데 axios를 사용하여 통신할 때마다 token값을 매번 header에 세팅하여 넘겨주는 것은 가독성이 떨어지고 비효율적이기 때문에 interceptor를 활용하여 처리해 주는 것이 좋다.

interceptor란?

interceptor는 보통 http 클라이언트 요청 및 응답을 가로채어 전처리 작업을 수행하도록 도와주는 기능이다.
예를 들어, axios에서는 요청을 보내기 전에 interceptor를 사용하여 요청에 대한 설정을 추가하거나 응답을 받은 후에 interceptor를 사용하여 응답 데이터를 가공하거나 오류 처리를 할 수 있다. 이를 통해서 중복되는 코드를 방지하고 코드의 재사용성을 높일 수 있다.

---

axios 요청 interceptor

import axios from 'axios'

axios.interceptors.request.use(
    config => {
        // 전처리 작업 코드 추가
        
        return config
    },
    error => {
        console.error(error)
    }
)

위의 코드는 axios 요청시 interceptor를 실행하는 예시 코드다. axios 라이브러리 import를 하고 axios.interceptors로 기능을 제공하고 있다.
코드에서 함수로 처리되는 부분이 두 군데가 있는데, 하나는 config에 대한 처리, 그리고 error에 대한 처리다.

config 처리하는 함수
먼저 config를 처리하는 함수를 보게 되면 config는 그냥 request의 전체적인 instance 정보라고 할 수 있다. 해당 정보에는 url, method, params, data, headers, auth 등의 정보를 포함하고 있어 요청 직전에 요청 정보를 가공하거나 추가, 삭제할 수 있다.
그리고 해당 함수에서 가장 중요한 부분은 가공 후 마지막에 무조건 return을 시켜줘야 한다. 당연한 거지만.. 예전에 이 부분을 빼고 테스트를 하다가 시간을 허비한 적이 있다.

error를 처리하는 함수
error를 처리하는 함수는 말 그대로 요청시 에러가 발생했을 때 error 내용을 가로채 사전에 처리할 수 있는 함수다. 해당 함수 역시 처리 후 return을 시켜줘야 한다.

---

axios 응답 interceptor

import axios from 'axios'

axios.interceptors.response.use(
    response => {
        // 전처리 작업 코드 추가
        
        return response
    },
    error => {
        console.error(error)
    }
)

위의 코드는 응답에 대한 interceptor 예시 코드이다.
응답 역시 요청과 거의 유사하며, 실행되는 시점만 다르다고 보면 된다. 함수 기능에 대한 내용은 request와 동일하다.

response를 처리하는 함수

---

axios interceptor 활용 예시 코드

import axios from 'axios'


export default () => {
    
  function commonAxios(url, method, data) {
    
    // 요청 interceptor 처리
    const reqInter = axios.interceptors.request.use(
      config => {
        // token 세팅
        config.headers['Access-Token'] = 'access token value'
        config.headers['Refresh-Token'] = 'refresh token value'

        return config
      },
      error => {
        console.error(error)
      }
    )

    // 응답 interceptor 처리
    const resInter = axios.interceptors.response.use(
      res => {
        // token update
        updateToken(
            res.config.headers['Access-Token'],
            res.config.headers['Refresh-Token']
            
        return res
      },
      error => {
        console.error(error)
      }
    )

    const request = axios({
      url    : url,
      method : method,
      data   : data,
    })
    
    // 요청 interceptor eject
    axios.interceptors.request.eject(reqInter)
    // 응답 interceptor eject
    axios.interceptors.response.eject(resInter)
    
    return request
  }
  
  return {
    commonAxios
  }
}

위의 코드는 vue 환경에서 작성한 axios interceptor 처리 코드다.

코드 순서
1. 요청에 대한 interceptor 처리
    해당 interceptor에서는 요청 직전에 현재 페이지에서 보유 중인 token 정보를 header에 세팅을 한다.

2. 응답에 대한 interceptor 처리
    해당 interceptor에서는 응답 직전에 정상적으로 처리된 token을 다시 update 시켜준다.

3. axios 요청
    요청, 응답 interceptor 선언이 끝나면 최종적으로 axios 요청 코드가 실행된다. 실행 순서는 요청 interceptor 다음으로 실행되지만, 코드상에서는 interceptor에 대한 선언을 모두 작성한 다음 마지막에 실행해야 한다.

4. 요청, 응답 interceptor eject 처리
    최종적으로 모든 처리가 끝난 후에는 요청과 응답 interceptor 처리한 내용을 eject 시켜주는 것이 좋다.


여기서 중요한 부분은 axios 요청하는 코드보다 요청, 응답 interceptor가 먼저 처리돼야 한다. interceptor는 요청이 끝난 후에 처리되는 것이 아니라 요청 보내기 전 설정된 순서대로 실행되기 때문이다.

그리고 마지막 부분의 interceptor eject는 반드시 시켜줘야 한다. interceptor가 실행될 때마다 axios 내부적으로 실행했던 request manager에 실행 함수가 쌓이게 되는데, vue, react와 같은 SPA 프로젝트는 새로고침이 없기 때문에 메모리 사용량이 증가하게 된다. 그러므로 반드시 eject 시켜주는 것이 좋다.


소스 코드에 대한 처리 순서

axios interceptor 처리 순서

 

함수 호출시 interceptor에 대한 코드는 인식만 하고 있다가 axios 요청이 실행되면

request interceptor -> axios request -> response interceptor -> eject

이 순서로 처리가 된다.

 

---

마무리

이번 프로젝트를 진행하면서 axios를 깊이 있게 다루면서 학습을 한 것 같다. axios를 그냥 api 호출하는 기능으로만 단순하게 써왔는데 이번 계기를 통해서 axios의 내부적인 기능들을 공부할 수 있었고, interceptor 처리에 대해 조금 더 알아갈 수 있었던 시간이었다.

 

axios interceptor 처리한 웹 서비스 테스트

Economy FLow