JWT를 이용한 로그인 구현
- 로그인을 하면 서버로부터 응답값을 받아옵니다.
- 로그인 성공시 1에서 받은 토큰을 로컬스토리지에 저장하고, TokenTest로 navigate 됩니다.
- TokenTest 에서 GET, POST, DELETE, PUT을 테스트 해볼 수 있습니다.
- 제대로 토큰이 갔다면 서버측에서 응답값으로 보내주고, 이를 화면에 띄워줍니다.
- 로그아웃 버튼을 누르면 로컬스토리지에 저장한 토큰을 remove하고 다시 home화면으로 이동합니다.
- server로 accessToken으로 요청한다.
- 1의 accessToken이 만료되지 않았다면 server에서 정상적인 응답값이 들어온다.
- 1의 accessToken이 만료되었다면, 서버측에서 만료되었다는 응답을 준다 (HTTP status code : 401)
- 이 때 axios interceptors(response)가 error를 감지하여
${process.env.REACT_APP_URL}/api/v1/auth/reissue로 accessToken 과 refreshToken을 보낸다. - 4에 대한 응답값으로 서버에서 새로운 accessToken과 refreshToken을 보내준다.
- axios interceptor(request)가 새로 발급받은 토큰으로 다시 서버에 요청한다.
- 6의 경우 만료기간 전에 요청했다면 만료되지 않은 토큰이므로 정상적인 응답값을 준다.
