🔄Axiso

HTTP 통신 클라이언트 라이브러리인 Aixos에 대한 설정 파일입니다.

해당 파일은 회사 내부 백엔드 분들과 약속된 기준으로 작성된 만큼 일반적인 상황에서는 수정 할 일이 적습니다.

그러나 외부와 협업을 하는 등 불가피하게 수정을 해야 할 상황이 있기 때문에 각 부분별로 작성된 목적을 확인해봅시다.

Instance.ts

이 파일은 새 Axios instance를 설정하여 기본 설정 및 토큰 처리와 관련된 로직들이 작성된 파일입니다.

파일이 길진 않지만 이러한 axios instance를 생성해보지 않았다면 조금 어렵게 느껴질 수 있습니다.

Axios Instnace

가장 기본적인 axios 설정입니다.

해당 파일에서 생성한 axios Class를 다른 api 파일에서 instance로 생성하여 사용합니다.

BaseUrl 은 env파일 및 Vercel 에서 관리하기 때문에 환경변수의 base Url을 참조하지만

S3 upload시 baseURL 과 같은 변경이 필요한 상황에서는 따로 변경하여 사용해야 합니다.

Request Interceptor

axios interceptors는 API 요청시 우선적으로 수행되는 부분으로

첫번째 인자로는 api 요청 전 실행되는 함수, 두번째 인자로는 api 오류시 수행하는 함수를 전달합니다. 위 코드에서 요청 전 실행되는 코드는 Bearer 방식으로 통신하는 토큰을 설정하기 위함 입니다.

webStorage 에 저장된 토큰 값을 읽어 온 후, 토큰 사용 방식에 맞게 aixos header에 토큰을 설정합니다.

그리고 설정한 config 값을 반환하면 이 설정된 값으로 api를 요청합니다 .

토큰 값은 만료기간이 존재하여 항상 변하는 값 이기 때문에 instance에서 설정하는 것이 아닌 interceptor로 매번 설정합니다.

일반적인 상황에서는 위 코드를 수정할 일이 적지만

클라이언트에 저장된 토큰 정보를 다른 방식으로 불러오거나, (현재 버전에서는 webStorage를 사용하여 저장/불러오기를 실행합니다.) 다른 인증방식으로 토큰을 요청할 때 수정합니다.

Response Interceptor

Request Interceptor 처럼 이번엔 response시 우선적으로 실행되어야 할 함수를 담고 있습니다.

우선 정상적인 응답이 왔다면 dev 환경에서만 apiLogger를 실행하여 응답에 대한 정보를 console에 출력합니다.

response 에러시 에는 access 토큰 만료 시 수행해야 할 로직이 존재합니다.

똑개에서는 일반적으로 인증을 위한 access 토큰과 access 토큰의 갱신을 위한 refresh 토큰 두 가지로 인증을 진행하기로 똑개의 서버와 약속되어 있습니다.

만약 access 토큰이 만료된 상황 (444코드, 자체설정) 이라면 refresh 토큰으로 새 access 토큰을 발급받은 후 이전에 요청한 api를 다시 요청합니다.

이는 refresh.ts 의 refresh 함수로 처리하며, 자세한 refresh 로직은 아래에서 확인 가능합니다.

아예 토큰이 없거나 잘못된 상황은 (401, unauthenticated) 또한 고려해야 하지만, 이 로직은 각 프로젝트 별로 다른 경우가 많기 때문에 직접 작성을 권장합니다.

만약 서버 에러가 아닌 aixos나 내부 로직에서 문제가 생겼다면 다른 에러를 반환합니다. (catch 문)

2. Refresh

이 함수는 access 토큰 만료시 axios response interceptor에서 refresh 로직을 처리하기 위한 함수입니다.

수정할 일은 거의 없지만 refresh 로직이 궁금한 분들은 보는 것도 좋습니다.

추후 작성 예정입니다.