1주차 정리 (04.18~04.23)

내가 한일

• 로그인-로그아웃 구현
• intro UI 디자인
• 로그인 로직 설계

어려운 점

• MUI를 커스텀할 때, 특정 태그에 접근하는 법
• 애니메이션이 있는 컴포넌트와 modal 사이의 시간차 해결 방법
  (버튼 컨포넌트를 클릭하는 순간 clickhandler로 모달이 나오는 방식인데, 애니메이션이 작동하지 않는다.)
• refresh token (아래에 자세히)

Refresh Token

[프론트] - [서버]

[프론트엔드] 로그인을 한다.
🔽
[백엔드] Access Token과 Refresh Token 반환. 이 때 생성한 RefreshToken은 DB에 저장함.
🔽
[프론트엔드] Access Token과 Refresh Token을 session storage에 저장. 반환받은 Access Token을 매 api 호출마다 헤더에 넣어 전송.

IF : AccessToken 만료

[프론트엔드] Access Token을 재발급하기 위해서 백엔드에 api ("/token/refresh") 요청을 던짐.
🔽
[백엔드] 요청이 들어올 경우, DB에 있는 Refresh Token이 유효한지 확인하고 유효하면 Access Token을 재발급 후 반환해줌.
🔽
[프론트엔드] 반환된 Access Token을 session storage에 저장해줌.

이때 프론트에서는 access token이 만료되었을 때 refresh token으로 access token을 재발급해주는 코드를 넣어줘야하는데 이것이 쉽지 않다.... 코치님의 힘이 필요해..

session storage

• 저장 문법
  sessionStorage.setItem(key, value)

• 가져오기 문법
  sessionStorage.getItem(key)

sesson storage에 토큰을 저장해 줄때는 app.js나 회원가입이 아닌, 로그인 했을 때 즉, loginForm.js 에서 이루어지는 것을 명심하자..