[82] TIL Refresh Token 적용! (FE랑 맞추기)

 

 

 

1. 어려웠던 부분 : 

• 오늘 드디어 프론트엔드 팀원분과 그동안 작성하고 기다리고 있던 리프레시토큰을 적용해보았다. 분명히 나는 헤더에 엑세스토큰과 리프레시토큰을 보냈는데, 쿠키엔 undifined 라고 떠서 어디서 막힌걸까 헤맸는데, 지나가는 시넌님이 개발자창의 Network tap을 활용하는 법을 알려주셨다. 네트워크탭을 확인해보니 다행히 백에서는 response header에 토큰을 잘 담아 보내주고 있었다. 프론트에서 쿠키에 set하는 과정에서 오류가 있었는데 이 부분을 수정한 뒤 잘 반영이 되었다. 비록 길을 잃어 삽질하느라 9시간이나 걸렸지만, 그래도 오늘 안에 나의 밀린 과제였던 리프레시 토큰을 해결해서 다행이다! 

 

2. 느낀 점 : 

• 백엔드는 보통 디버깅을 할 때 log를 찍거나 디버깅을 하는데, 프론트단에서는 consol을 찍거나 개발자 창을 통해 확인을 한다. 개발자도구 inspect는 진짜 디버깅할 때 유용한 것 같다! 리엑트 코드를 나도 좀 더 이해할 수 있으면 작업이 정말 편할 것 같다. 언젠가 리액드를 공부해 보기로...! 

 

3. 새로 알게 된 내용 :

• 블로그 글과 구글링을 통해 리프레시 토큰을 구현했다. 글들에 설명이 부족해서 처음에 도대체 토큰 재발급 api요청은 언제 어떤 방식으로 보내야 하는지 엄청 헤맸다.
• 첫 시도는 사용자가 토큰 만료후 어떠한 요청을 보냈을 때 토큰만료 Status Code를 401번으로 서버에서 프론트로 응답했는데, 이 401 코드가 뜨면 프론트에서 해당 토큰재발급 api 요청을 보내는 것으로 설계했다. 그러나 어떤 이유에서 401번 코드가 먹히지가 않았다. 
• 다음 방법은 현재 갖고 있는 액세스 토큰 만료시간 5분 전에 setTimeout()을 활용해서 요청을 보내는 것으로 수정했더니 정상 작동 하였다. 아래는 프론트에서 만료시간 전 토큰 재발행 요청을 하는 코드 일부분이다.

export const setAccessToken = (token) => {
  const expireDate = new Date();
  expireDate.setMinutes(expireDate.getMinutes() + 30);

  setTimeout(() => {
    instance.post('/auth/issue/token').then((response) => {
      setAccessToken(response.headers.accesstoken);
    });
  }, 25 * 60 * 1000);

  cookies.set(ACCESS_TOKEN, token, {
    path: '/',
    expires: expireDate,
  });
};

 

4. 셀프칭찬 (오늘 잘한 일) : 

• 항상 내가 할 수 있을까? 라는 생각으로 의심하고 걱정했는데, 그래도 오늘 리프레시 토큰이라는 과제를 끝내서 다행이라고 생각했다! 

5. 내일 할 일 : 버그수정, 토요일 멘토링 준비 ( 개념 공부 )