프로젝트를 진행하다 보면 아래와 같은 이유로 fecth 보다 axios 라이브러리를 주로 사용하고 있습니다.
- node에서도 사용할 수 있다
- 요청을 취소할 수 있다
- 요청과 응답을 가로챌 수 있다
- Promise 기반이고, response.data로 데이터에 접근할 수 있다
Axios interceptor란?
Axios docs - interceptor를 보면 요청 인터셉터는 axios에서 제공하는 기능 중 하나로, Promise 응답에 대해 then, catch로 처리되기 전에 요청과 응답을 가로채서 추가적인 처리나 수정을 할 수 있는 기능을 제공한다고 나와있습니다.
Axios interceptor를 어디에 사용하면 좋을까?
여러 프로젝트에서 Axios 라이브러를 사용하면서 서버에 토큰 인증을 필요로 하는 API 요청을 할때마다 HTTP Authorization 요청 헤더에 토큰을 넣어줘야하고 401(Unauthorized) 에러가 서버로부터 들어오면 토큰을 갱신해준 후 재요청을 보내는 과정을 일일이 처리하는 번거로움이 있었는데 위 interceptor 기능을 이용해 토큰이 필요한 요청에만 헤더에 토큰을 넣어주고 그렇지 않은 경우에는 헤더를 삭제하여 중복 코드를 제거하고 유지 보수성을 향상시키기 위해 Axios 인터셉트를 사용하기로 했습니다.
사용 코드
1) Axios 인스턴스 생성
import axios from 'axios';
const instance = axios.create({
baseURL: '요청을 보낼 api 주소',
});
instance.defaults.headers.post['Content-Type'] = 'application/json';-
instance.defaults.headers.post['Content-Type'] = 'application/json';: 생성한 axios 인스턴스의 defaults.headers를 사용하여 기본 헤더를 설정한다.
-
baseURL과 헤더 설정이 기본적으로 포함된 상태로 요청을 보낼 수 있다.
2) 요청 인터셉터 등록
instance.interceptors.request.use(
function (config) {
const token = localStorage.getItem('token');
if (token) {
//토큰이 있을 시 헤더에 토큰 추가
config.headers['Authorization'] = 'Bearer ' + token;
} else {
//토큰이 없다면 헤더가 필요 없으므로 제거
delete config.headers['Authorization'];
}
return config;
},
function (error) {
return Promise.reject(error);
}
);instance.interceptors.request.use 는 요청 인터셉터를 등록하는 메서드입니다. use 메서드는 두 개의 함수를 인자로 받을 수 있습니다.
- 성공 함수
첫 번째 함수는 요청 설정 객체 config를 인자로 받습니다. 이 함수 내에서 다음과 같은 작업을 수행합니다:
브라우저의 localStorage에서 'token' 키로 저장된 값을 가져옵니다.
토큰이 존재할 경우 (if (token)), Authorization 헤더를 설정하며, 해당 헤더의 값으로 'Bearer ' + token을 지정합니다. 이렇게 하면 요청이 보내질 때 마다 해당 토큰 값이 Authorization 헤더에 포함되어 전송됩니다.
만약 토큰이 없을 경우 (else), 기존에 설정된 Authorization 헤더를 삭제합니다.
처리된 config 객체를 반환합니다. 이 반환된 config가 실제로 axios에 의해 사용되어 요청이 발생합니다.
- 에러 함수:
두 번째 함수는 에러 정보를 담고 있는 error 객체를 인자로 받습니다. 이 함수에서는 단순히 에러를 거절하는 Promise를 반환하도록 설정되어 있습니다 (return Promise.reject(error);). 이렇게 하면 요청 처리 중에 문제가 발생할 경우 해당 에러를 반환하게 됩니다.
