문제 상황

• 아래와 같이 로그인 성공 시, 로컬 스토리지 내에 토큰을 저장한다.
• 그 후, axiosInstance 내 헤더에 토큰을 할당하여 API 요청을 보내던 중, 오류가 발생하여 확인해보니 토큰의 값이 null이였다.

  /** 로그인 요청 함수 */
  const handleLogin = async () => {
    if (!userInfo.name || !userInfo.password) {
      alert("로그인 정보를 입력해주세요.");
      return;
    }

    const loginResult = await handleRequestLogin(userInfo);

    if (loginResult?.code === 200) {
      localStorage.setItem('token',loginResult.data)
      loginSuccess();
      navigate("/", { replace: true });
    } else {
      alert("로그인 정보를 다시 확인해주세요.");
    }
  };

/** Axios Instance */
const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,
  timeout: 10000,
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${localStorage.getItem("token")}`,
  },
});

원인

• Axios Instance를 초기화 시에, 토큰 값이 존재하지 않기 때문에 null일 수 밖에 없다.
• 이후, 로그인 성공 시에 로컬스토리지에 토큰을 저장하기는 하지만 Axios Instance에는 업데이트되지 않는 것이 원인이였다.

해결

• Axios를 이용하여 API 요청을 보내기 전, 인터셉터라는 모듈을 사용하여 요청 전 수행할 동작을 지정하는 것이 가능하다.
• 따라서 API 요청 전 토큰 값을 지정해주는 동작을 인터셉터에 추가한 셈이다.

/** 요청 전 인터셉터 */
axiosInstance.interceptors.request.use(
  (config) => {
    // 요청 전에 수행할 작업
    const token = localStorage.getItem("token");
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 요청 오류 처리
    return Promise.reject(error);
  }
);