Flow 정리
1. 메인화면에서 로그인을 클릭한다
2. 로그인 페이지에서 승인된 사용자의 id와 pw로 로그인을 한다
3. 로그인을 성공하면 API 서버가 토큰을 반환한다
4. 반환된 토큰을 저장하여, 페이지를 이동하거나 사용자 인증이 필요한 요청을 수행할 때, 헤더에 토큰을 넣어보낸다.
5. API 서버는 요청받은 message의 헤더에서 토큰을 찾아 승인된 사용자인지 확인한다.
Token을 어디에 어떻게 저장할까
반환해주는 Token은 두가지가 있다.
- refresh-token
- access-token
여기를 참고하여 정리를 해보면,
결국 받아온 토큰을 저장할 때,
1. refresh token은 local storage에 저장하고, access token은 cookie에 저장하라
2. 요청 헤더에는 access token을 넣어라
3. access token이 만료됐다고 하면, refresh token을 가져와 새로운 token을 발급받는 요청을 하여 갱신해라
이다.
프로젝트 적용
<로그인 요청 후, 요청을 성공했을 때>
- local storage에 refresh token 저장
- access token을 cookie에 저장
- 로그인 화면에서 환영한다고 깜찍하게 띄워주기 위해 username도 cookie에 저장(위험한 방법이지만, 일단 가벼운 프로젝트이기에 이렇게 수행)
<로그아웃을 했을 때>
- cookie 삭제
- local storage 삭제
결과 화면
'Web > React' 카테고리의 다른 글
| React] 사용자 입력 그룹화 및 api 서버 처리 요청 (0) | 2021.11.06 |
|---|---|
| React] 로그인 여부에 따른 페이지 분리 (0) | 2021.10.30 |
| React Native 4] 파일 분리와 expo api사용하기 (0) | 2020.07.16 |
| React Native 3] Logic : Flexbox Layout (0) | 2020.07.16 |
| React Native 2] React Native 기초 (0) | 2020.07.16 |
