[React] axios의 모듈화와 토큰 관리

 

개인 공부 후 자료를 남겨놓기 위한 목적이므로,
생략되거나 오류가 있을 수 있음을 알립니다.
설명에 대한 지적은 언제나 환영입니다. :)

---

 

취미공유 SNS인 모꼬지의 프로젝트를 진행하면서 만들어지는 많은 axios를 어떤식으로 관리했는지에 대해 적어보았다.

 

우리의 경우네는 사용되는 axios를 크게 두 분류로 정리해놓았는데,

 

토큰이 필요하지 않은 axios (비인증 api)와 토큰이 필요한 axios (인증이 필요한 api)로 나누어 사용했다.

 

토큰이 필요하지 않은 axios의 경우에는 일반적인 모듈화를 진행하여 import를 통해 불러와서 사용했으며,

 

토큰이 필요한 axios는 axios에서 제공하는 메서드인 interceptors를 사용하여, 실제 api 요청을 보내기 전,

 

프론트엔드에서 토큰의 만료를 체크하고, 만료되었다면 refreshToken을 이용해 갱신을 하도록 했다.

 

 

---

 

1. generalApi.ts

 

우리가 사용했던 토큰이 필요하지 않은 일반적인 axios 이다.

 

다음의 기본적인 옵션을 가지고 있으며,

 

 

밑의 코드를 활용하여, 원하는 방식의 요청으로 만들어 사용할 수 있도록 했다.

 

 

위의 해당 axios api를 만든 후, 사용하고자 하는 컴포넌트에서 

import { signUpApi } from "../../lib/generalApi.ts"

를 헤더에 삽입해 불러와 사용하며,

 

이때 axios에 body에 해당하는 값(Option)을 signUpApi(option) 와 같이 넣어 사용했다.

 

해당 함수는 async await가 사용되었으므로, Promise 객체가 반환되기 때문에

 

기본적으로 비동기 방식을 사용하며 이 때문에 해당 함수를 호출한 후,

 

.then((res) => {}) .catch((err) => {})

 

를 사용하여 값을 이용하도록 했다.

 

 

---

 

2. withTokenApi.ts

우리가 토큰이 필요한 api의 경우 사용했던 axios이다.

 

기본 베이스는 위의 generalApi.ts와 동일하나, 토큰을 헤더에 담아서 보내는 형식을 취하고 있으며,

 

axios의 interceptors를 통하여 api를 실행하기 전, 다른 행동을 취하고 진행한다는 특징이 있다.

 

 

 

해당 함수는 실행되기 전에 기본적으로 refresh.ts를 거쳐가도록 했다.

 

refresh.ts에서는 가지고 있는 accessToken의 유효시간을 파악해 (expiresAt) 실제 서버에서 토큰이 만료 되기 전, 

 

refreshToken을 이용하여 accessToken을 갱신하는 작업을 하도록 했다.

 

사용 방법은 위의 generalApi.ts와 동일하다.

 

 

---

refresh.ts

토큰의 상태를 파악하고 갱신을 받는 코드이다.

 

 

 

---

Promise 객체의 반환에 대하여

promise 객체는 다음 중 하나의 상태를 가진다.

 

• 대기 (pending) : 이행하지도, 거부하지도 않은 초기 상태
• 이행 (fufilled) : 연산이 성공적으로 완료됨.
• 거부 (rejected) : 연산이 실패함.