[React🍇] axios interceptors typescript로 설정하기

해당 포스팅은 React에서 axios interceptors를 typescript로 설정하는 방법에 대해 다룹니다.

interceptors란?

then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다.
https://axios-http.com/kr/docs/interceptors

 

사용자가 수신하는 모든 요청 또는 응답에 자동으로 추가되는 기본 설정입니다. 수신되는 응답의 상태코드를 확인하거나 인증 토큰을 넣을 때 유용합니다. 인터셉터에는 두가지 유형이 있습니다.

1. request interceptor : 요청이 전송되기 전에 코드 일부를 작성하거나 실행할 수 있습니다.
2. response interceptor: 응답이 발신 측에 도달하기 전에 코드 일부를 쓰거나 실행할 수 있습니다.

https://lightrains.com/blogs/axios-intercepetors-react/

 

1. axios 인스턴스 생성

http.ts

import axios from "axios";

const instance = axios.create({
  baseURL: '<https://some-domain.com/api/>',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

axios.create 로 인스턴스 baseURL, timeout, headers를 설정합니다. baseURL는 필수적으로 설정합니다. timeout과 headers는 옵션값이고 설정하지 않아도 작동합니다. 인스턴스를 작성하면 get, request, delete, post 등 메서드를 사용 가능합니다.

2. request, response & error handler 생성 인증 토큰 다루기

http.ts

import axios, { Axios, AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
import userStorage from '../helper/localStorage';


const instance = axios.create({
	baseURL: process.env.REACT_APP_API_URL
})

instance.interceptors.request.use(
	(config: AxiosRequestConfig) => {
		const token = userStorage.getToken();
		if (token) {
			config['headers'] = {
				Authorization: `Bearer ${token}`
			}
		}
		return config;
	}
)

instance.interceptors.response.use(
	(response: AxiosResponse) => {
		return Promise.resolve(response.data)
	},
	(error: AxiosError) => {
		
		if (!error.response) {
			return;
		}
    // store 통해서 오류 발생 UI 업데이트 
    if (error.response.status === 401) {
      // 접근 권한이 없습니다.
    }
    if (error.response.status === 500) {
      // 서버 문제가 발생했습니다.
    }
    // 만약 위 상태 코드로 에러 처리가 불가능한 경우 reject 시키기
    Promise.reject(error);
	}
)

export default instance;

instance의 interceptors 메서드를 사용합니다. 이 때 request나 response 메서드를 사용할 수 있씁니다. request를 작성할 때 config에 인증 메서드를 넣으면 api 코드 작성시 중복된 코드를 줄일 수 있습니다.

3. Axios API 코드 설정

auth.ts
import http from './http'

const authApi = {
  login(data: { id: string, password: string }) {
    return http.post('/login', data);
  },
  register(data: { id: string; password: string; email: string }) {
    return http.post('/user', data);
  },
  logout() {
    return http.post('/logout')
  },
};

export default authApi;

객체 안에 auth와 관련된 api를 모아서 생성합니다. http에 메소드를 get과 post같은 메소드를 사용합니다. 파라미터 첫 번째는 url, 두 번째는 data, 세 번째 config 값을 넣습니다.

 

요약

Axios interceptor 기능을 사용해서 요청을 가로채서 헤더에 인증 값을 넣거나 하여 업데이트 할 수 있습니다. request가 해결되면 response를 받습니다. 이때 미리 설정한 로직을 통과하지 못한 경우 해당 response를 다시 반환할 수 있습니다. 아무 문제 없는 경우 그대로 전송 받습니다.