들어가기 전에..

• 처음 로그인했던 아이디를 로그아웃한 후, 다른 아이디로 로그인을 해서 토큰정보를 활용하는 axios 요청을 할때, 이전 로그인한 아이디의 토큰이 들어온다..😇
• axios헤더에 있는 토큰을 어떻게 지금 유저꺼로 바꿀수 있을까..분명 로그아웃하면 localstorage에 저장돼 있는 토큰을 지우고, 리덕스 툴킷에 유저정보들도 다 지워주는 로직을 썼는데, 인내심에 한계에 도달했다..
  사실 프로젝트가 끝난 후에 백엔드 분들은 리펙토링하는 것에 참여가 어렵다고 하셨기 때문에, 에러나는 것에 대해 프론트 쪽에서 다 확인할수 밖에 없었고, 사실 https 배포 조차 계속 안돼고 있었기 때문에 많이 지쳐있었다..
• 새로고침 😂😂
  => 지쳐갈때 쯤, 무심결에 새로고침을 했더니 제대로된 그 유저의 토큰이 헤더에 들어있었다.
  => 정말 지쳐갈때쯤, 해결책 하나를 찾았다.
• axiosinterceptor
  => 하지만 새로고침을 억지로 하면서 문제를 해결하는거 보다 원인을 제대로 알고 싶어 폭 풍 구글링을 했고, axios interceptor를 사용하여 axios요청전에 로그인하고 받아온 localstorage에 있는 헤더를 가져와 토큰을 바꿔끼면서 해결했다.🥰🥰

💡💡후에 알게된 원인..

• 우선 제일 이해가 안된것은 axios요청을 할때 마다 새 유저의 토큰을 가져와서 새로 갈아낀다고? 생각했기 떄문에 왜 자꾸 이전 사용자의 토큰이 들어오는지 이해가 되지 않았다...
• 디버깅을 이것저것 돌려 보다....원인을 발견했다..😂

let token = getLocalStorage("access_token");
export const BaseInstance = axios.create({
  baseURL: import.meta.env.VITE_APP_API_URL,
  headers: {
    Authorization: token,
  },
});

• 위에 Axios instance로직을 보면..그 원인을 알수 있다..
  위 로직에선 토큰이 인스턴스를 만드는 시점에 가져와서 사용한다는 것.. 즉 인스턴스가 만들어질 때에 아직 사용자 인증 요청을 하지않아서 이전 토큰을 가져오는 것이었다.
  따라서 아래 시도한 것 2)의 axios interceptor를 사용하여 토큰을 새로 갈아껴서 axios요청을 하니 문제가 해결되었던 것이다..

시도한 것 1) 로그인할때 새로고침하기 => 성공은 했지만..찜찜..😂

• 원래 로그인 성공을 하게 되면 useNavigate를 사용하여 홈으로 이동하게 했지만,새로고침을 해주니, 새로 로그인한 사람의 토큰이 axios header에 달렸다.
• 하지만, 억지로 새로고침을 하는 것보다 더 좋은 방법이 있는것 같아서 폭풍 구글링을 했다.

//코드 생략
const navigate = useNavigate();

//생략
//고치기 이전
navigate("/");

//고친 이후
window.location.replace("/");

시도한 것 2) axios interceptor => 성공 🥰

• axios interceptor를 사용하여 axios 요청 전에 요청을 가로채서 localstorage에 있는 토큰를 가져와 새로운 토큰을 바꿔낌

//코드생략
let token = getLocalStorage("access_token");
export const BaseInstance = axios.create({
  baseURL: import.meta.env.VITE_APP_API_URL,
  headers: {
    Authorization: token,
  },
});

BaseInstance.interceptors.request.use(
  (config) => {
    let newtoken = getLocalStorage("access_token");
    try {
      config.headers.Authorization = `${newtoken}`;
    } catch (err) {
      console.log(err);
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);
//코드생략