React | 새로고침시 데이터가 안불러와지는 문제

몇일동안 해결하지 못했던 이슈를 해결하게 되었습니다. 로그인 시 새로고침을 해도 로그인이 풀리지 않도록 sessionStorage에 토큰을 담았습니다. 그리고 로그인이 필요한 서비스들은 인터셉터를 활용하여 요청이전에 토큰을 헤더에 담아주었습니다.

문제는 인터셉터를 통해 토큰이 자동으로 담겨 서버에 요청을 보내는 줄 알았는데 새로고침을 할 경우 인터셉터가 실행되기 전에 요청이 보내진다는 것이었습니다.

  const [myMeeting, setMyMeeting] = useState();
  useEffect(() => {
    instances
      .getMyMeeting()
      .then((res) => {
        console.log('mymeetings', res);
        setMyMeeting(res.data);
      })
      .catch((err) => {
        console.log('err', err);
      });
  }, []);

instance.interceptors.request.use(
  (config) => {
    instance.defaults.headers.common['Authorization'] = sessionStorage.getItem('Access_token');
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

개발자 도구 -> 네트워크에서 로그를 보고 알았어요. 요청 헤더를 보니 Authorization이 비어있더라구요 그래서 useEffect에서 getMyMeeting이 실행되기전에 토큰을 담아주는 코드를 작성해서 해결했습니다.

  const [myMeeting, setMyMeeting] = useState();
  useEffect(() => {
    instance.defaults.headers.common['Authorization'] = sessionStorage.getItem('Access_token');
    instances
      .getMyMeeting()
      .then((res) => {
        console.log('mymeetings', res);
        setMyMeeting(res.data);
      })
      .catch((err) => {
        console.log('err', err);
      });
  }, []);

이렇게요.

HTTP를 공부하는 것이 중요하다는 것을 깨닫는 계기가 되었습니다.