[js] Axios Interceptor로 효율적인 API 통신 관리

회사에서 로그인기능을 토큰 방식으로 전환하면서 요구사항이 생겼다. accessToken과 refreshToken에 관련된 내용이였다. 요구사항은 일정 시간이 지나면 accessToken이 만료되니, accessToken이 만료된 경우에는 백엔드에서 발급해주는 토큰으로 변경해서 token을 전송하고, refreshToken이 만료된 경우 로그아웃처리하고 재로그인되게 해야한다는 것이었다.

모든 통신마다, 해당 로직을 선언하는 건 너무 비효율적이라는 생각이 들었고 조금 편한 방법이 없을까 검색하던중 axios의 interceptor 라는 기능을 확인 할 수 있었다.

목차

1. Axios Interceptor란?
2. Interceptor가 필요한 이유
3. 실제 구현 사례

1. Axios Interceptor란?

Axios Interceptor는 Http 요청이나 응답이 then/catch 핸들러로 이동하기 전에 가로채서 처리하는 기능이다.

Interceptor 기본 구조

// 요청 인터셉터
axios.interceptors.request.use((config) => {
  // 요청 보내기 전 수행할 작업
  return config;
  },
	(error) => {
// 요청 에러 처리
		return Promise.reject(error);
	}
	);
// 응답 인터셉터
axios.interceptors.response.use((response) => {
  // 응답 데이터 처리
  return response;
  },
	(error) => {
  // 응답 에러 처리
  return Promise.reject(error);
  }
  );

2. Interceptor가 필요한 이유

• 토큰 기반 인증 처리
• 공통 헤더 설정
• 에러 핸들링 통합 관리
• 로딩 상태 관리
• API 응답 데이터 가공

나는 토큰 기반 인증 처리에만 interceptor를 사용했는데 블로그글을 작성하면서 더 많은 곳에 다양하게 적용할 수 있겠다는 생각이 든다. 다음에는 에러핸들링과 로딩상태관리를 프로젝트에 적용해봐야겠다.

3. 실제 구현 사례

3.1 토큰 기반 인증 처리

const authAPI = (url, options) => {
	const instance = axios.create({
		baseURL: url,
		...options,
	});
	instance.interceptors.request.use((config) => {
		const token = localStorage.getItem("jwt_token");
		if (token) {
			config.headers.Authorization = Bearer ${token};
		}
		return config;
		},
        (error) => {
        return Promise.reject(error);
        }
	);
	instance.interceptors.response.use((response) => response,
		async (error) => {
			const { response, config } = error;
            // 토큰 만료 에러 처리
            if (response?.status === 401) {
				const newToken = await refreshToken();
            if (newToken) {
                config.headers.Authorization = Bearer ${newToken};
                return instance(config);
            }
			}
			return Promise.reject(error);
		}
		);
	return instance;
	};

결론

Axios Interceptor는 API 통신의 공통 로직을 효율적으로 관리할 수 있게 해주는 강력한 도구이다. 적절히 활용하면 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있을 거 같다.