axios 러닝가이드를 참고했다 but too simple...!
구글링을 통해 더 알아보았따.
📌 axios 요청을 하고 응답하는 과정을 가로채어 사용자가 원하는 동작을 실행하게 해준다.
나 같은 경우에는 이것을 이용해서 headers 값을 넣어주었다.
원래는 로그인이 성공하면 jwt 토큰 값을 로컬에 저장하고,
그걸 axios.headers.common.Authorization = Bearer ${res.data.result.jwt}
요런식으로 저장해주려고 했는데 새로고침을 해야만 headers 값이 들어갔다.
여쭈어보니 브라우저 단에서의 스토리지와 defaults 로 넣었을 때 싱크가 맞지 않아서 아니냐는 의견이 나왔다. 흠 그럴듯.. 그래서 요청 전에 가로채서 header 값을 넣어주는 인터셉터를 사용한다고 오호
// 요청 인터셉터 추가
axios.interceptors.request.use(
function (config) {
// 요청을 보내기 전에 수행할 일
// ...
return config;
},
function (error) {
// 오류 요청을 보내기전 수행할 일
// ...
return Promise.reject(error);
});
// 응답 인터셉터 추가
axios.interceptors.response.use(
function (response) {
// 응답 데이터를 가공
// ...
return response;
},
function (error) {
// 오류 응답을 처리
// ...
return Promise.reject(error);
});
이처럼 요청과 응답 인터셉터가 존재한다. 나는 사용자 지정 axios 함수가 있었기 때문에
apiClient.interceptors.request.use((config) => ({
...config,
headers: {
"X-ACCESS-TOKEN": localStorage.getItem("jwt"),
},
}));
이렇게 인터셉터를 apiClient.js 파일 안에 넣어주었다. 이제 새로고침 없이도 정상적으로 잘 작동한다.