로그인 토큰 관련문제 - dltmdrbtjd/HANG GitHub Wiki

토큰 관련된 문제

• 서버에서 기존 토큰이 만료되면 리프레쉬 토큰을 이용해서 통신을하게 만들었는데 프론트에서 자꾸 3시간 마다 토큰이 만료되는 상황이 발생했다. 원인을 찾기가 쉽지않았었는데 headers안에는 분명 리프레쉬 토큰이 같이 들어오고있고 담기고 있는걸 확인했다. 그런데 왜 이걸 프론트에서 못받고있을까?에 대한 고민에서 부터 시작되었다.

기존에 사용하던 코드

• 만약 401에러를 반환받으면 로그인 페이지로 보내고 토큰이 만료되었다는 알람을 보여주었다. 그 이유는 리프레쉬 토큰을 잘작동하고 있는줄 알았고 그 리프레쉬토큰도 만료되었을때 401이 생성된다고 생각하고있어서 이런 오류처리를 했었는데 하지만 리프레쉬 토큰이 제대로 작동하고 있지 않아서 3시간 마다 토큰만료라는 문제가 생겼었던것이다.

instance.interceptors.response.use(
  (response) => {
    return Promise.resolve(response);
  },
  (error) => {
    const path = window.location.pathname;
    if (
      error.response.status === 401 &&
      !['/signup', '/signin', '/onboarding'].includes(path)
    ) {
      window.alert('토근이 만료되었습니다. 다시 로그인해주세요.');
      delToken();
      delUserInfo('userInfo');
      history.push('/signin');
    }
    return Promise.reject(error);
  },
);

새로 작성한 코드

• 그래서 서버분과 회의를 통해서 만약 기존 토큰이 만료되면 307을 반환해주기로 약속하고 프론트 측에서는 307를 에러를 받았을때 새로받은 토큰을 cookie에 담아주고 localStorage에 담겨있던 유저정보도 변경시켜주고 다시 원래페이지를 유지하게끔 예외처리를 추가하였다. 그래서 기존토큰 만료시 리프레쉬 토큰을 사용하고 만약 리프레쉬 토큰도만료가 되었을때 401에러를 반환하여 토큰이 만료되었다는 에러를 띄워주도록 로직을 변경하고나서 리프레쉬 토큰이 작동하지 않던문제를 해결하였습니다.

instance.interceptors.response.use(
  (response) => {
    return Promise.resolve(response);
  },
  (error) => {
    const path = window.location.pathname;

    if (error.response.status === 307) {
      setToken(error.response.data.newAccessToken);
      setUserInfo('userInfo', jwtDecode(getToken()));
      history.go(0);
    } else if (
      error.response.status === 401 &&
      !['/signup', '/signin', '/onboarding'].includes(path)
    ) {
      window.alert('토근이 만료되었습니다. 다시 로그인해주세요.');
      delToken();
      delUserInfo('userInfo');
      history.push('/signin');
    }
    return Promise.reject(error);
  },
);