[React] axios의 defaults.headers.common를 사용해 헤더에 액세스 토큰 탑재

JWT토큰을 이용하여 로그인 기능을 구현하게 되면 인가가 필요한 요청 시에 헤더에 액세스 토큰을 탑재해야 한다.

axios의 defaults.headers.commom를 이용하여 편리하게 액세스 토큰을 탑재할 수 있다.

---

사용방법

import axios from 'axios';

axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`

위의 코드에서 accessToken에 해당하는 값만 상황에 맞게 적용해주면 된다.

다음과 같은 코드를 추가하면 이후 axios의 모든 요청에 액세스토큰이 헤더에 탑재된다.

---

적용해보기

1. 서버로부터 응답받은 액세스 토큰을 바로 헤더에 적용하기

import axios from 'axios';

const getAccessToken = () => {
	axios.get(`${엔드포인트}`)
		.then((res) => {
			axios.defaults.headers.common['Authorization'] = `Bearer ${res.data.accessToken}`
		})
};

⇒ 액세스 토큰이 메모리상에 저장되어 탈취될 위험이 적어진다고 알고있다.

2. 로컬스토리지의 리프레쉬 토큰을 통해 액세스 토큰을 응답받아 헤더에 적용하기

import axios from 'axios';

const getAccessToken = () => {
	const refreshToken = localStorage.getItem('refreshToken');
  	axios.get(`엔드포인트`, {
	  headers: {"Authorization": `Bearer ${refreshToken}`}
	})
	  .then((res) => {
			axios.defaults.headers.common['Authorization'] = `Bearer ${res.data.accessToken}`
	   });
};

⇒ 프로젝트에 리프레쉬 토큰을 적용하였을 경우이다. 액세스 토큰을 발급받아 axios 헤더에 적용한다.

장점

1. 반복적인 코드를 제거할 수 있다.

2. 민감할 수 있는 액세스 토큰을 쿠키나 로컬 스토리지 등이 아닌 메모리 상에 저장할 수 있다.