axios request마다 authorization 업데이트 하는 방법 ( interceptor )

프로젝트를 진행하는데 api마다 axios의 headers를 import해서 사용하였다.

그런데 그렇게 사용하다보니 axios가 header를 매번 update하지 않아서 authorization이 제대로 되지 않았다.

예를 들면, 로그인 하기 전의 token value를 가지고 있어서 로그인 하고 나서 새로고침 하기 전까지는 authorization이 undefined or null 값이 들어가게 되었다.

그래서 막 찾다보니 axios.interceptor로 이슈를 해결할 수 있었다.

interceptor는 axios가 request가 발생할 때마다 작동하게 되어서, token을 바로바로 업데이트 할 수 있게 해준다.

예시)

export const axiosInstance = axios.create();

axiosInstance .interceptors.request.use(
  (config) => {
    if (!config.headers.Authorization) {
      const token = sessionStorage.getItem('TOKEN');
      if (token && token.length > 0) {
        let decodedToken = jwt_decode(token);
        const tmstamp = parseInt(Date.now() / 1000);
        if (tmstamp <= decodedToken.exp && decodedToken.user && decoded.user.id) {
          config.headers.Authorization = token;
        } else {
          alert('세션 연결이 종료되었습니다.');
        }
      } 

    }
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);