[Axios] axios interceptor 사용하여 token 담아서 요청 보내는 방법

LimSeNa·2023년 10월 15일

Interceptor accesstoken axios localstorage refresh_token

Axios

목록 보기

2/2

1. 개요

현재 Wasabi 프로젝트에서 BE와 FE 통신할 때, axios를 사용하고 있다.

axios에서는 interceptor라는 것을 제공하고 있는데, 이를 사용하여 인증된 사용자만 요청을 보낼 수 있는 기능을 구현하기 위해 axios interceptor에 대해 알아보려 한다.

2. axios란?

Promise 기반 HTTP 클라이언트다.

즉, HTTP 요청을 보냈을 때 요청에 성공한 경우에는 전달받은 데이터를 처리하고(then) 실패한 경우에는 에러를 처리(catch)하도록 한다.

3. axios interceptor란?

then 또는 catch로 처리되기 전에, 요청과 응답을 가로챈다.

axios interceptor를 사용하는 이유
서버에 accessToken을 필요로 하는 요청을 보낼 때 Header에 accessToken을 넣는 것과 401(Unauthorized) 에러가 발생했을 때 accessToken을 갱신한 후 재요청을 보내는 것을 한 곳에서 처리하여 중복 코드를 줄이고 유지보수를 향상시킬 수 있다.

가로챈다는 것은 요청을 하거나 응답을 받기 전에, Header에 assessToken 정보를 담는다는 것을 의미한다.

4. axios interceptor 동작 방식

axios 객체 생성

const client = axios.create(); // 기존

const client = axios.create({
	baseUrl: URL,  // 서버 주소
	timeout: 1000, // 유효한 요청 시간
	// 더 많은 속성이 있으니 조사해 볼 것!
});

Request Header에 interceptor 추가

client.interceptors.request.use(
	(config) => {
		const accessToken = getToken(); // getToken()은 accessToken을 가져오는 함수
		
		config.headers['Content-type'] = 'application/json';
		config.headers['Authorization'] = `Bearer ${accessToken}`;

		return(config);		
	},
	(error) => {
		console.log(error);
		return Promise.reject(error); // reject는 자바스크립트에서 제공하는 콜백으로, 에러 객체를 나타내는 error와 함께 호출
	},
);

Response Header에 interceptor 추가

client.interceptors.response.use(
	(response) => {
		if (response.status === 404) {
				console.log('페이지가 존재하지 않습니다. 입력하신 주소가 정확한지 다시 한 번 확인해 주세요.');
		}

		return response;
	},
	async (error) => {
		if (error.response.status === 401) {
			if (isTokenExpired()) await tokenRefresh(); // tokenRefresh()는 accessToken을 갱신해 주는 함수

			const accessToken = getToken();

			error.config.headers = {
				'Content-Type': 'application/json',
				Authorization: `Bearer ${accessToken}`,
			};

			const response = await axios.request(error.config);
			return response;  
		}

		return Promis.reject.(error);
	}
);