로그인 페이지 생성하기
회원가입 페이지와 거의 비슷하기 때문에 대부분의 코드를 복사 붙여넣기 후 로그인에 맞게 수정.
성공시 토큰은 로컬스토리지에 저장.
login route 생성하기
로그인 라우트 생성
비밀번호 비교함수 생성
로그인시 토큰이 잘왔고 isAutheh도 true로 잘 나온다.
인증이 되어있는지 체크하기
app.jsx가에서 새로고침을 하고 isAuth가 ture일 이면 dispatch의 auth User가 호출이 되면서 axios를 사용해서 비동기 요청을 한다.
auth라우터 생성 그리고 auth 미들 웨어를 작성하고 그걸 이용해서 인증된 유저의 정보를 준다.
미들웨어 코드 작성
userSlice 작성
NotAuthRoutes, ProtectedRoutes
로그인이 안된 사람이 로그인이 필요한 페이지에 들어간 경우 로그인 경로로 리다이렉트 시켜준다.
로그인이 된사람이 회원가입이나 로그인 페이지에 들어가려고할 때 / 루트 경로로 리다이렉트 시켜 준다.
NavBar
완성본 예시
좌우가 작아지면 + 버튼을 눌러서 navbar를 아래로 내릴 수 있다.
초안
완성본
NavBar Item
각 라우트에 맞는 처리를 위해 routes 배열을 만들었고 map을 사용하여 순회하며 렌더링
화면의 크기에 맞게 스타일링 적용 및 분기 처리
로그아웃 클릭시 logoutUser thunk 함수 실행 후 로그인 페이지로 이동
logoutUser thunk 함수
백엔드에서 logout 라우트 생성 //auth 미들웨어를 거쳐 잘 통과했으면 올바른유저(로그아웃할 수 있는)
userSlice 생성
token 만료되었을 때 처리하기
정석은 refresh 토큰을 발급을 하는거지만 우선 없이 기능 구현
토큰의 만료 시간이 지나면 위와 같은 에러가 나온다. 그래서 그에러를 활용해서
reload 를 하면
이 부분이 실행이 되고 authUser로 가게되고 만료된 토큰이어서 error를 userslice가 처리해서 토큰을 지운다.