# Axiso

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

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

## Instance.ts

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

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

<figure><img src="https://1168173052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9A2Jt7XcUkiyMXRHBecz%2Fuploads%2FZ3olR22JYUfolZkKyDhF%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-08-06%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.56.52.png?alt=media&#x26;token=67958945-82cd-4f76-9fac-14ba898acd1c" alt="" width="359"><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Axios Instnace" %}

<figure><img src="https://1168173052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9A2Jt7XcUkiyMXRHBecz%2Fuploads%2Fqascgj7QSaWrkTxFiIIx%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-08-06%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.58.59.png?alt=media&#x26;token=52f04b19-ebae-4615-b168-1995c63cb188" alt=""><figcaption></figcaption></figure>

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

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

**BaseUrl** 은 **`env`**&#xD30C;일 및 **`Vercel`** 에서 관리하기 때문에 **환경변수의 base Url을 참조하지만**

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

{% tab title="Request Interceptor" %}

<figure><img src="https://1168173052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9A2Jt7XcUkiyMXRHBecz%2Fuploads%2FKHjZztNUHLkr633pzIfi%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-08-06%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.06.37.png?alt=media&#x26;token=8dfc3132-fd53-4309-81da-f331cdb84277" alt=""><figcaption></figcaption></figure>

**`axios interceptors`**&#xB294; **API 요청시 우선적으로 수행**되는 부분으로

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

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

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

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

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

**클라이언트에 저장된 토큰 정보를 다른 방식으로 불러오거나**, (현재 버전에서는 webStorage를 사용하여 저장/불러오기를 실행합니다.)\
[**다른 인증방식**](https://velog.io/@cada/%ED%86%A0%EA%B7%BC-%EA%B8%B0%EB%B0%98-%EC%9D%B8%EC%A6%9D%EC%97%90%EC%84%9C-bearer%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C#%EC%9D%B8%EC%A6%9D-%ED%83%80%EC%9E%85)**으로 토큰을 요청할 때 수정**합니다.
{% endtab %}

{% tab title="Response Interceptor" %}

<figure><img src="https://1168173052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9A2Jt7XcUkiyMXRHBecz%2Fuploads%2Fcwcy1Kv8fZBfNWxMurZk%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-08-06%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.13.11.png?alt=media&#x26;token=b51ed3e2-effb-4ac6-be47-2f949c7011c4" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

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

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

## 2. Refresh

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

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

> **추후 작성 예정입니다.**
