전역 axios설정 문의

네 강사님 답변 감사드립니다.

위의 API도 적용을 해 봤었는데 궁극적으로 제가 원하는 API가 아닌 거 같아서 여쭤보고 싶었습니다 ㅠㅠ

제 글에 요청 취소라고 적어놓았는데 궁극적으로 제가 원하는 건 첫번째 axios의 응답이 토큰 유효성 오류로 넘어오게 된다면 그 이후 (axios요청)코드들이 취소 되는, 다시 말하자면 이후의 api들이 요청되지 않았으면 하는 바람이 있습니다.

현재 제 프로젝트에서 코드 성 select box를 공통 컴포넌트로 빼서 각 페이지(부모)컴포넌트에서 필요할때마다 불러서 삽입해서 작업을 하고 있습니다. ex) email주소, 이동 통신사  등등..

이렇게 진행이 될 시에, 생명주기 상 자식 컴포넌트가 먼저 로딩 되기 때문에 이미 select box에서 토큰 유효성 오류 리턴을 받게 되는데, 부모의 created시점에서는 자식과 별개로 또 다시 필요한 api를 요청하기 때문에, 토큰 유효성 오류가 여러번 반복해서 리턴 되고 있는 상황입니다.

그래서 제가 여쭤본 내용 중에는 혹시나 이런 상황이 해결이 어렵다면 자식 컴포넌트에서 axios를 호출하는 것을 지양하고 부모 컴포넌트에서 조회 이후 props로 값을 내려주는 방식을 써야 하는건지 궁금합니다.

토큰 유효성이 만료되면 경고창을 띄운 이후 로그인 창으로 돌려 보내는 작업을 하는데, 

경고창이 여러번 떠서 해결방안을 물색중에 있었습니다.

긴 글 읽어 주셔서 감사합니다.