[typescript] Axios를 사용하여 에러에 대한 자동 리프레시 및 토큰 재발급

22 Dec 2023

typescript

웹 애플리케이션을 개발할 때 API 호출 시 발생하는 인증 토큰 만료 및 네트워크 에러를 다루는 것은 중요한 과제입니다. 이러한 문제를 해결하기 위해 Axios를 사용하여 에러 처리를 효과적으로 관리하고 API 호출 시 자동으로 토큰을 재발급하고 리프레시 하는 방법을 살펴보겠습니다.

Axios란?

Axios는 HTTP 클라이언트 라이브러리로, 브라우저 및 Node.js 환경에서 사용할 수 있습니다. Promise 기반 API를 제공하며, 요청과 응답 데이터를 쉽게 다룰 수 있는 기능을 제공합니다.

에러 처리와 토큰 재발급 구현 방법

아래는 TypeScript에서 Axios를 사용하여 에러에 대한 자동 리프레시 및 토큰 재발급을 구현하는 예제입니다.

import axios, { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

api.interceptors.response.use(
  (response: AxiosResponse) => {
    return response;
  },
  async (error: AxiosError) => {
    const originalRequest = error.config;
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const token = await refreshAccessToken(); // 토큰 재발급 로직 호출
      originalRequest.headers.Authorization = `Bearer ${token}`;
      return api(originalRequest);
    }
    return Promise.reject(error);
  }
);

async function refreshAccessToken(): Promise<string> {
  // 토큰 재발급 로직 구현
  // ...
  return 'new_access_token';
}

// API 호출
api.get('/data')
  .then(response => {
    console.log('Data:', response.data);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

위 예제에서 api.interceptors.response.use를 사용하여 응답에 대한 처리를 정의하고, axios.create를 통해 기본 설정을 구성합니다. 또한, 401 에러가 발생하면 토큰을 재발급하고 API 호출을 자동으로 다시 시도하는 로직을 구현하였습니다.

결론

Axios를 사용하여 API 요청 시 발생할 수 있는 에러에 대해 자동 리프레시 및 토큰 재발급 기능을 구현하는 것은 매우 유용합니다. 이를 통해 사용자는 오랜 시간 동안 로그인 상태를 유지하고, 네트워크 에러에 강인한 애플리케이션을 개발할 수 있습니다.

더 많은 정보를 원하시면 Axios 공식 문서를 참고하시기 바랍니다.