[메인프로젝트] Axios Interceptor로 로그인 리팩토링 (진행 중)

상황

프로젝트를 하는 내내 머리를 감싸쥐게 했던 것이 바로 axios와 jwt 토큰이 메인인 로그인 기능이었다.

이 기능들을 기본 함수와 커스텀 훅을 이용해 구현했는데, 이걸 axios interceptor로 리팩토링하려고 한다.

 

프로젝트를 진행할 당시에도 interceptor의 존재를 알았지만 안 썼던 이유는 간단하다.

프리 프로젝트를 할 때 직접 할 수 있는 일을 라이브러리를 도입해서 쓰려다가 오히려 더 복잡해진 경험이 있어서,

할 수 있어 보이는 일에 굳이 라이브러리를 쓰고 싶지 않아서였다.

 

보통 interceptor를 사용하는 이유를 찾으면 주로 이런 것이 나온다.

1) api 호출할 때마다 비효율적으로 axios 인스턴스를 생성
2) axios 마다 동일한 content-type , token와 같은 헤더값 처리
3) axios TIMEOUT 시간, base url 등에 대한 중복 처리

 

그런데 내 생각은 이랬다.

1) interceptor 써도 호출문 import해 오고 주소 작성해서 body나 parameter 전달하는 거 똑같아 보이던데..

    다른 파일에 코드를 작성해두고 import로 가져오는 방식이라면 굳이 라이브러리를 쓰지 않아도 할 수 있다.

    실제로 TokenAuth.js라는 파일을 만들고 관련 함수들을 만들어서 몰아두고 썼다.

 

2) 토큰 받아오자마자 default 로 만들면 되는데 다른 변수에 저장했다가 다시 config 할 필요가 뭐가 있는가..?

axios.defaults.headers.common['Authorization'] = response.data.accessToken

3) base url도 마찬가지로 한 번 설정해 놓으면 다시 적을 필요가 없다.

axios.defaults.baseURL = process.env.REACT_APP_API_URL

 

그러다가 이런저런 경우에서 에러가 나는 것을 잡으러 다니면서 '그거 썼으면 지금쯤 훨씬 편했으려나..' 하는 생각이 들었다.

(access / refresh 시간 설정해두고 만료 되는 상황을 관찰하는 게 끝도 없는 잠복근무 같았다)

그래서 프로젝트 끝나면 '그거' 한 번 꼭 써 보리라 하고 계속 마음속에 담아두고 있었다.

 

목표하는 것

사용을 위해 다시 검색해보다가, 아래 두 링크를 보고 '이런 방법이라면 리팩토링하는 의미가 있겠다' 싶어서

이 방법들을 적용하고자 한다.

 

1. API파일 작성

앞에 적은 '내 생각' 1번에 대한 답이 될 수 있겠다. 정말로 axios 요청을 보내는 곳의 코드가 눈에 보이게 깔끔하려면 주소와 전달값도 안 보여야지, 하는 생각.

https://velog.io/@skyepodium/axios-%EC%9D%B8%ED%84%B0%EC%85%89%ED%84%B0%EB%A1%9C-API-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0

 

+ 글 하단에 적힌 다른 활용법들도 좋아 보였다. 특히 로딩 인디케이터는 또다른 리팩토링 목표이기도 하다.

1. 로그인 전후 분기 처리해서 헤더 넣어주기
2. 모든 요청에 로딩 인디케이터 삽입하기
3. 응답 에러 발생시, 알림 팝업 만들기

2. 직방 기술 블로그에 소개된 'axios 실패 시 재시도' 방법에 관한 글이다.

AxiosRequestConfig를 재시도 횟수를 저장할 저장공간으로 활용하는 방식도 좋았다.

https://medium.com/zigbang/%EC%9A%B0%EB%A6%AC-axios%EC%97%90%EA%B2%8C-%EB%8B%A4%EC%8B%9C-%ED%95%9C-%EB%B2%88-%EA%B8%B0%ED%9A%8C%EB%A5%BC-%EC%A3%BC%EC%84%B8%EC%9A%94-a7b32f4f2db2

 

 

 

 

 

글에 오류가 있거나 조언이 있으시다면 댓글 남겨주시면 감사하겠습니다 :)