230310 - React - Login 기능 구현 페어코딩

https://github.com/100space/230310

GitHub - 100space/230310: 페어코딩

 

오늘의 목표

1. 로그인 기능구현
2. React 이용할 것
3. front와 back  분리 작업 ( DB까지 연결은 안 해도 MVC패턴 )
4. 2인 1조로 역할 나눠서 진행
 

맡은 역할

front-end
 

디렉토리 구조

 

 
잘 짜인 디렉터리 구조는 아니지만...!
 

결과

로그인 기능을 구현했다. 

 
 
로그인 유무에 따른 Navigation bar를 다르게 보여준다. 로그인 시 데이터를 백서버로 요청하여 토큰을 만들고 그 토큰을 다시 응답메시지에 cookie에 담아주면서 토큰을 쿠키로 관리할 수 있도록 하였다.
 

그리고 응답을 받은 내용을 이용하여 상태를 로그인 상태로 바꿔주고, 이 과정에서 토큰의 만료시간을 같이 상태로 관리했다.
토큰의 유효시간이 만료되면, 로그인 상태를 풀리게 구현했다.
 
이 로직을 잘 활용하면 은행사이트와 같이 사이트에서 일정 시간 후에 로그인 상태를 풀 수 있을 것 같다.
 
로그인 상태 및 시간은 localStorage를 이용하여 새로고침을 해도 유지할 수 있도록 했다.
 
 

기본 로그인 로그아웃 기능

 
그리고 토큰을 이용하여 페이지에 이동시 검증 과정을 이용하여 보안을 유지할 수 있을 것으로 생각된다.
 
 
 

 
 
 

---