[FE] 리프레시 토큰 적용

[nan-noo]

요약

• accessToken이 만료되었다는 응답이 왔을 때 refreshToken과 함께 accessToken을 발급 요청한다
• 새로운 accessToken을 발급받으면 accessToken을 클라이언트에 저장하고, 기존에 요청했던 리소스를 다시 fetch
• refreshToken도 만료되었다는 응답이 오면 저장되어 있는 accessToken을 제거하고 로그아웃

세부 설명

axios 또는 react-query를 사용하여 에러 핸들링을 할 예정이다.

axiosinstance에 response interceptors로 response 에러가 발생했을 때를 처리할 수 있는데, 에러 코드가 accessToken 만료를 의미한다면 refreshToken 재발급 api로 요청을 보내 새로운 accessToken을 세션 스토리지에 저장한다.(이 과정이 실패할 때 에러 처리도 필요)
-> request interceptors의 config에 항상 최신의 accessToken을 header 'Authorization' 필드에 저장하도록 되어 있음!

react-query 훅의 onError 옵션을 활용한다
코드 참고

useQuery(key, fn, {
    onError: (error) => {
      if (새로운 accessToken 재발급 받음) {
          queryClient.invalidateQueries("todos"); // 또는 refetch
          return;
      }
      ...
    }
})

처음 로그인할 때 refreshToken을 쿠키에 저장하도록 구현

---

또 다른 방법!
그냥 react query onError만 사용한다.

useQuery(key, fn, {
    onError: (error) => {
      if (accessToken이 만료되었다) { 
        // 아래 코드도 useMutation 훅으로 빼도 될 듯
        postRefreshToken().then((tokenRefreshSucccessful) =>
          queryClient.invalidateQueries("todos") // refetch
        ).catch(()=>{ 리프레시 토큰도 문제가 있는 것이므로 로그아웃 필요 })
      }
    }
})

[nan-noo]

우선 두번째 방법으로 진행!