axiosInstance 전역상태에서 토큰 만료시 401 오류 처리

API 호출을 했는데 자꾸 401 에러가 떴다. 혹시 토큰이 만료됐나 싶어서 로컬 스토리지를 확인했더니 예전에 쓰던 값 그대로였다.

만료된 토큰을 계속 사용해서 서버가 신뢰하지 못한 것이다.

 

그래서 응답 인터셉터를 수정했다. 401 에러가 발생하면 로컬 스토리지에서 accessToken을 삭제하고 로그인 페이지로 리다이렉트하도록 코드를 추가했다. 이렇게 처리하고 다시 테스트해보니, 만료된 토큰으로 인해 401 에러가 발생해도 자동으로 로그아웃되면서 로그인 페이지로 이동했다.

 

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "http://localhost:8383",
  withCredentials: true,
});

axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("accessToken");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status === 401) {
      console.warn("401 Unauthorized 발생 - 자동 로그아웃 처리");

      localStorage.removeItem("accessToken");
      alert("세션이 만료되었습니다. 다시 로그인해주세요.");
      window.location.href = "/";
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

 

 

 

• 문제: 만료된 토큰을 계속 사용해 401 Unauthorized 에러 발생
• 조치: 응답 인터셉터에서 401 감지 → 로컬 스토리지 토큰 삭제 → 로그인 페이지로 리다이렉트
• 결과: 만료된 토큰이 자동으로 제거되고, 사용자가 바로 재로그인하도록 유도됨

 

회고

토큰 관련 문제가 나오면 다른 걸 의심하기 전에 먼저 재로그인해보는 게 맞는 것 같다. 토큰을 전송하지 않은 게 아니라면 다른 원인이 뭘까 생각해봤는데, 혹시 했더니 역시 만료된 토큰이 문제였다. 토큰 동작 방식에 대해 좀 더 깊이 이해할 필요가 있겠다는 생각이 들었다.