[React]Axios 인트턴스 및 헤더 설정

Inung_92·2023년 12월 31일

ajax authorization axios 토큰

React

목록 보기

12/15

Axios 인스턴스란?

axios.create()함수를 통해 인스턴스를 생성하고, 헤더 등 필요한 정보를 사용자가 정의하여 반복적인 작업없이 Axios를 사용 할 수 있도록 지원

인스턴스 생성

// ./instance.js
export const client = axios.create({
	// 설정 정보를 작성
	headers: { 'Content-Type': 'application/json' },
	withCredentials: true,
});

axios 인스턴스를 생성할 때 고정적으로 사용되거나 기본적인 부분에 대한 설정은 create() 함수의 인자로 전달되는 객체를 활용해 각각의 속성에 대한 설정 값을 지정한다.

인스턴스 설정

export const client = axios.create({
	baseURL: 'http://...',
	timeout: 1000,
	headers: {...}
});

인스턴스에 대한 설정은 코드와 같이 필요한 부분만을 설정할 수 있으며, 설정 가능한 config에 대한 정보가 필요하다면 여기를 참고하자.

웹 애플리케이션에서는 로그인 전과 로그인 후에 사용되는 요청 헤더 값이 다른 경우들이 있다. 로그인 전에는 인증 정보가 없으므로 사용자의 권한을 식별하는 기능을 지원하지 않도록 하며, 로그인을 하고 나서야 사용자의 권한과 정보가 필요한 기능들을 사용 할 수 있다.

사용자의 권한이 요청마다 확인될 수 있도록 axios 인스턴스를 생성하고 헤더에 로그인 시 응답받은 토큰을 설정해보자.

방법 1

export const client = axios.create({
	headers: {
		'Content-Type': 'application/json',
		Authorization: `Bearer ${localStorage.getItem('token')}`, // or sessionStorage
	},
	withCredentials: true,
});

인스턴스를 생성함과 동시에 인자로 토큰 정보를 헤더에 설정하는 방법이다. 로그인 후 최초 로딩되는 페이지에 해당 인스턴스가 사용되지 않는다면 사용하는데 지장은 없다.

하지만 위 방법에서 가장 큰 문제는 최초 로딩되는 페이지에서 API를 호출한다면 토큰의 정보가 null로 전달된다. 이유는 다음과 같다.

웹 애플리케이션 실행과 동시에 client 인스턴스 생성(별도의 js 파일로 생성)
시기 상 로그인을 시도하지 않았으므로 token의 상태는 null
생성된 인스턴스는 당시 설정 정보를 유지

이런 경우 로그인 후 local 또는 session 스토리지에 저장된 토큰정보를 받기 위해 새로고침을 해야지 정상적으로 작동하는 상황이 발생한다. 이런 문제를 해결하기 위해 다음과 같은 방법으로 설정을 바꾸었다.

방법 2

export const client = axios.create({
	headers: { 'Content-Type': 'application/json' },
	withCredentials: true,
});

// 요청 interceptors 설정
client.interceptors.request.use(function (config) {
	const token = sessionStorage.getItem('accessToken');
	config.headers.Authorization = `Bearer ${token}`;
	return config;
});

기존에 인스턴스 생성과 동시에 토큰 정보를 설정한 것과 달리 인터셉터를 활용해 매 요청마다 헤더 정보를 스토리지에서 획득하여 설정하는 것으로 바꾼 것이다. 인터셉터는 기본적으로 요청과 응답 전 작업을 수행하고, 수행 시 발생한 에러를 핸들링 할 수 있는 역할을 하기 때문에 요청 시 해당 시점의 브라우저 스토리지에 저장된 정보를 호출 할 수 있다.