Get token 오류

import { create } from "zustand";

interface StoreState {
  isloggedIn: boolean;
  storeLogin: (token: string) => void;
  storeLogout: () => void;
}

export const getToken = () => {
  const token = localStorage.getItem("token");
  return token;
}

const setToken = (token: string) => {
  localStorage.setItem("token", token);
};

export const removeToken = () => {
  localStorage.removeItem("token");
}

export const useAuthStore = create<StoreState>((set) => ({
  isloggedIn: getToken() ? true : false, // 초기값
  storeLogin: (token: string) => {
    set({isloggedIn: true});
    setToken(token);
  },
  storeLogout: () => {
    set({ isloggedIn: false});
    removeToken();
  }
}));

위에서 getToken export

import axios, { AxiosRequestConfig } from "axios";
import { getToken, removeToken } from "../store/authStore";

const BASE_URL = "http://localhost:5678";
const DEFAULT_TIMEOUT = 30000;

export const createClient = (config?: AxiosRequestConfig) => {
  const axiosInstance = axios.create({
    baseURL: BASE_URL,
    timeout: DEFAULT_TIMEOUT,
    headers: {
      "content-type": "application/json",
      Authorization: getToken() ? getToken() : "",
    },
    withCredentials: true,
    ...config,
  });
  axiosInstance.interceptors.response.use(
    (response) => {return response;},
    (error) => {
      // 로그인 만료 처리
      if (error.response.status === 401) {
        removeToken();
        window.location.href = "/login";
        return;
      }
      return Promise.reject(error);
    }
  )

  return axiosInstance;
}

export const httpClient = createClient();

우리가 axios 인스턴스가 생성될 때 한 번만 호출되기 때문에, 이후
로컬 스토리지 토큰이 업데이트되어도 axios 요청 헤더는 새로운 토큰이 반영되지 않는다.

그래서 위 코드의 getToken() 부분을 한번만 호출되는 오류를 고치는 코드로 바꿔줌

headers: {
      "content-type": "application/json",
      Authorization: getToken() ? getToken() : "",
    },
// 이 부분을 제거하고

      // 
const setAuthorizationHeader = () => {
  const token = getToken();
  return token ? `${token}` : "";
};
  
  axiosInstance.interceptors.request.use(
    (config) => {
      config.headers['Authorization'] = setAuthorizationHeader();
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );

인스턴스 될때마다 가져올 수 있도록 코드 수정했다