⏿ 실제 백엔드와 프론트엔드 통신 #4. Axios Instance에서 셋의 비동기적 공존

요청 인터셉터, 응답 인터셉터, 리프레쉬 토큰 함수는 axios Instance에서 비동기 함수로 선언되어있다.

 

요청 인터셉터와 응답 인터셉터의 역할

 

1. 요청 인터셉터: 서버와 통신 전 필요한 작업 -> 서버야 주세요! 하기전 작업입니다.

 

로컬스토리지부터 권한을 받아옵니다.

 

• 요청 인터셉터는 모든 API 요청 전에 호출됩니다.

 

• 주 역할:

1. 헤더 추가:

• 요청마다 엑세스 토큰(또는 인증 정보)을 자동으로 헤더에 추가.

 

2. 요청 수정:

• 예: URL을 동적으로 변경하거나, 특정 조건에 따라 요청을 수정.

 

3. 디버깅/로깅:

• 요청이 서버에 도달하기 전에 요청 정보를 기록.

 

2. 응답 인터셉터: 서버 응답 후 필요한 작업

• 응답 인터셉터는 서버에서 응답을 받은 직후 호출됩니다.

 

• 주 역할:

1. 성공 응답 가공:

• 서버에서 반환된 데이터를 클라이언트가 사용하기 쉽게 변환.

 

2. 에러 처리:

• 특정 상태 코드(401, 404, 500 등)에 따라 후속 작업을 처리.

 

3. 토큰 갱신:

• 401 상태 코드(엑세스 토큰 만료)가 반환되면 리프레시 토큰을 사용해 토큰을 갱신하고, 실패 시 로그아웃 처리.

 

3. 인터셉터와 리프레시 토큰 함수의 관계

 

서버와 상호작용의 흐름

• 요청 인터셉터: (권한 가져오기)

1. 클라이언트가 API 요청을 보낼 때, 요청 인터셉터가 호출됩니다.

2. 헤더에 엑세스 토큰을 추가하여 요청을 보냅니다.

 

 

• 응답 인터셉터: (응답을 관리하고 실패하면 다시 권한을 발급)

1. 서버에서 응답이 반환되면 응답 인터셉터가 호출됩니다.

2. 만약 응답이 401 에러(엑세스 토큰 만료)라면, refreshAccessToken을 호출해 새 엑세스 토큰을 발급받습니다.

3. 새로운 엑세스 토큰으로 원래 요청을 재시도합니다.

 

셋은 서로 공존하면서 비동기적으로 움직인다

• 요청 인터셉터 → 응답 인터셉터 → refreshAccessToken 함수는 서로 긴밀히 연결되어 있으며, 각각의 작업이 비동기적으로 동작합니다.