토큰관리2 [React] axios의 모듈화와 토큰 관리 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 취미공유 SNS인 모꼬지의 프로젝트를 진행하면서 만들어지는 많은 axios를 어떤식으로 관리했는지에 대해 적어보았다. 우리의 경우네는 사용되는 axios를 크게 두 분류로 정리해놓았는데, 토큰이 필요하지 않은 axios (비인증 api)와 토큰이 필요한 axios (인증이 필요한 api)로 나누어 사용했다. 토큰이 필요하지 않은 axios의 경우에는 일반적인 모듈화를 진행하여 import를 통해 불러와서 사용했으며, 토큰이 필요한 axios는 axios에서 제공하는 메서드인 interceptors를 사용하여, 실제 api 요청을 보내기 전, 프론트엔드에서 토큰의 만료를.. 2022. 8. 22. [React] FrontEnd JWT 토큰 관리 프로세스 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 프로젝트를 진행하면서 Frontend에서 로그인의 상태 유지를 어떻게 하고 (리액트 기준), JMT 토큰을 어떻게 다루어야 하는지 정리해보았다. 1. 로그인 / 로그인 유지 로그인 api에 id와 password를 가지고 post 요청을 보낸다. 응답으로 받은 데이터를 처리해준다. accessToken을 localstorage에 저장한다. ( 자동 로그인이 싫다면 sessionstorage에 저장한다. refreshToken은 Cookie에 저장한다. 액세스 토큰 만료 사전 확인을 위한 expiresAt을 만들어 localstroage에 저장함(현재 시간 + 1시간 -.. 2022. 8. 22. 이전 1 다음
