인프런 커뮤니티 질문&답변

리프레시 토큰을 rt, 엑세스토큰을 at라고 줄여 부르겠습니다.

프론트에서는 at를 사용해서 서버api에 잘 접근하고 있다가 at의 기간이 짧기 때문에 어느순간 인증에러로 인한 401에러를 서버로부터 받게될겁니다. 이때 프론트에서는 해당에러 발생시 rt를 통해 at를 새롭게 발급받게 하는 코드가 필요합니다.

이 과정에서 사용자가 그러한 흐름을 알고 직접 재발급요청을 하는게 아니기 때문에 프론트의 interceptor와 같은 자동화 코드를 통해 401에러시 rt를 통해 자동으로 at를 재발급 받도록 해야 합니다. 이런 자동화 코드가 필요합니다.

또한 만약 rt마저 유효기간이 만료되면 그때는 다시 로그인을 해야 하므로, 로그인화면으로 사용자를 보내게 해야합니다. 이 일련의 흐름이 프론트에서 해야할 일입니다. 제가 인터셉터관련 샘플코드를 드릴테니 참고해보시기 바랍니다.

https://github.com/kimseonguk197/vercel_cloudfront_inflearn/blob/main/src/main.js

안녕하세요, 인프런 AI 인턴입니다. 최아라님.

Refresh Token을 사용하는 경우 프론트엔드 코드에서 몇 가지 점이 달라질 수 있습니다. 이 변경 사항들은 주로 토큰 갱신 및 관리로 인한 부분들입니다. 다음은 주요 변화 내용입니다:

1. 토큰 사용 방식:

   • 기존에는 Access Token 하나만으로 인증 및 인가를 처리했다면, Refresh Token을 사용하면 두 개의 토큰을 관리해야 합니다. Access Token은 주로 짧은 수명으로 발급되며, 토큰이 만료되면 Refresh Token을 통해 새로운 Access Token을 발급받는 로직이 추가됩니다.
     

2. 토큰 저장 및 관리:

   • Access Token과 Refresh Token을 각각 안전한 방법으로 저장해야 합니다.
     
   • Access Token은 클라이언트 측에서 접근해야 하기 때문에 보통 로컬 스토리지나 메모리에 저장됩니다.
     
   • Refresh Token은 서버와의 통신이 필요할 때만 사용되며, 보안을 위해 쿠키에 저장하거나 서버에서 호출 시마다 전달받는 방법을 고려할 수 있습니다.
     

3. API 호출 변경:

   • API 호출 시 Access Token이 만료된 경우, 자동으로 Refresh Token을 통해 새로운 Access Token을 발급받고 API를 재시도 하는 로직이 필요합니다.
     
   • 이를 위해 Axios의 인터셉터 등을 사용하여 오류 처리를 자동화할 수 있습니다.
     

4. 보안 고려 사항:

   • Refresh Token은 장기적인 인증 수단이므로 더욱 주의깊게 관리해야 하며, 안전한 저장소에서만 관리하여 무단 접근을 방지해야 합니다.
     

이와 관련된 더 많은 정보를 알고 싶다면, 아래의 유사한 질문 링크를 확인해 보세요:

• Refresh Token 사용 및 관리 방법에 대한 토론 - Refresh Token에 대한 개념 및 사용 사례
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.