[React] Login 및 Token 관리

로그인 기능을 구현하기 위해 다음과 같은 로직을 적용했다.

 

1. Id, Password를 입력받고 로그인 시 state에 있는 Id와 Password를 첨부하여 API에 POST 요청을 보낸다.

2. accessToken, refreshToken을 받아온다. 

3. status가 200이면 Redux에 accessToken을 dispatch하고 localStorage에 refreshToken을 넣은 후 메인 페이지로 이동한다. 

4. 만료 시간 1분 전에 localStorage에 저장되어 있는 refreshToken을 사용하여 accessToken을 refresh해준 뒤 dispatch한다. 

5. 메인 페이지 컴포넌트가 랜더링 됐을 때 useEffect 또는Componentdidmount 함수를 사용하여 Redux에 토큰값이 있는지 확인한다.

6. 토큰이 없다면 alert와 함께 로그인 페이지로 이동시킨다. 

7. 토큰이 있다면 해당 토큰을 인자로 받은 뒤 header에 실어 데이터를 fetching해온다.

8. fetching한 데이터를 Redux에 dispatch하고 필요할 경우 state로 관리한다. 

 

 

 

//5월 30일 수정

 

새로고침 시 Redux의 토큰값이 초기화되어 로그아웃되는 이슈가 발생하였다.

 

이를 해결하기 위해 아래와 같은 방법을 적용했다.

 

1. 로그인 시 Redux에 accessToken을 저장함과 동시에 localStorage에도 accessToken을 저장한다. 

2. 메인 페이지에서 Redux에 있는 토큰이 아닌, localStorage에 있는 토큰으로 로그인 상태를 체크한다.

3. 데이터 fetching 시 Redux에 있는 토큰이 아닌, localStorage에 있는 토큰을 헤더에 실어 보낸다.