답변들을 봐도 이해가 안되서 다시 한번 질문드립니다.

Question

문제 1. 최초의 login 요청에 setInterceptors에서 token값이 셋팅이 안되어있고, logout뒤 login 할때, 값이 셋팅되어있는건, 최초의 login요청에서 뒤늦게 셋팅되어진 token값을 불러 오는 건가요 ?  문제 2.createInstance 이 함수는 앱을 실행시켰을때, 최초로 한번만 호출이 되고 그 뒤에는 무슨 요청을 해도 반응이 없는데, 로그아웃뒤 로그인할때, 헤더에 토큰값이 셋팅되는건 역시 Vue의 뛰어난 반응성이 한 몫 한건가요? 아니면 Interceptors가 정말 가로채서 Header만 쏙 넣어준건가요?   const instance = createInstance(); 로 저렇게 박아두어서 instance값이 앱이 실행될 때 말고 바뀌지 않을꺼 같다는 생각이 들어서 질문드립니다.

캡틴판교 · Answer

안녕하세요 박굿뜨님, 좋은 질문 주셨는데 제가 답변이 늦었네요 :) 바로 답변 드리겠습니다. 1) 인터셉터에서 다루는 token은 로그인에 성공했을 때 발급받은 토큰 값을 이용해서 설정합니다. 흐름을 정리해보시면 다음과 같습니다. a) 로그인 성공 -> 토큰 발급 -> 뷰엑스의 state에 저장 -> API 호출시마다 활용 b) 애플리케이션 접속 -> 쿠키에 저장된 토큰으로 인터셉터 header Authorization 속성 설정 -> API 호출시마다 활용 위 흐름을 참고해서 다시 생각해보시면 조금 더 이해가 잘 가실거에요 :) 2) 첨부해주신 createInstance() 함수는 애플리케이션을 실행할 때 한번만 설정이 됩니다. 아쉽게도 Vue의 뛰어난 반응성은 여기에 적용되지 않습니다.. :) 말씀하신대로 instance 값은 변경되지 않으나 매번 API를 호출하고 받아올 때 인터셉터에 정의한 함수가 실행되기 때문에 토큰을 받아온다고 생각하시면 좋을 것 같아요. 좋은 질문 해주셔서 감사합니다. 남은 강좌도 재밌게 들으시구요 :)