로그인 후 새로고침 하지않으면 요청 헤더에 Authorization이 들어가지 않는 오류 (axios instance)
Summary
나쁘지 않은 삽질이었다. 검색 후 바로 해결 완료.
Problem
const accessToken = localStorage.getItem('token');
export const instance = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
headers: {
'Content-Type': 'application/json',
Authorization: accessToken,
},
});
사용한 axios instance는 위와 같습니다.
[오류 발견한 과정]
1. 로그인
2. 질문 상세 페이지로 이동
3. 답변 POST (오류 발생)
답변 POST 요청을 보낼 때 401 unAuthorization 오류가 발생했습니다.
그런데 새로고침을 하면 정상적으로 POST가 됩니다. 네트워크를 확인해 보니 새로고침을 안 하고 POST를 누르면 헤더에 Authorization이 없더라고요.
바로 스택 overflow에 검색해 봤더니 저희와 똑같은 문제를 겪고 있던 사람이 있었습니다.
이를 통해 바로 해결할 수 있었습니다.
저 링크에서 설명하는 이유는 다음과 같습니다.
1. React의 생명 주기 외부에서 axios 인스턴스를 생성한다.
2. 로그인 화면에 들어가면 Axios 인스턴스가 생성된다.
3. axios 생성 코드는 한 번만 실행되고 더 이상 실행되지 않기 때문에 로그인한 후 axios 인스턴스에는 여전히 null 토큰이 있다.
4. 새로고침을 하면 저 코드가 다시 실행되고 이때는 로컬 스토리지에 토큰 값이 있기 때문에 이제 헤더에 authorization값이 포함된다.
axios interceptors를 이용하면 이를 해결할 수 있다고 합니다. (실제로 해결됨 굳)인터셉터를 사용해서 요청을 보내기 전에 헤더 Authorization에 토큰 값을 넣을 수 있습니다.
axios 인터셉터 동작원리는 아래 블로그에 자세하게 설명되어 있습니다.https://www.timegambit.com/blog/digging/axios/01
Solved
const accessToken = localStorage.getItem('token');
export const instance = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
headers: {
'Content-Type': 'application/json',
Authorization: accessToken,
},
});
instance.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
// eslint-disable-next-line no-param-reassign
config.headers.Authorization = token || '';
return config;
});
