React에서 로그인을 유지해보자.
next에서는 getServerSideprops를 통한 서버사이드렌더링을 하여 로그인 유지를 쉽게 할 수 있다.
그렇다면 csr을 할때에는 어떤식으로 로그인을 유지해야 할까?
어떤식으로 유지를 해야하는가에 대한 공부를 하기 위해서는 세션 or 쿠키에 대한 이해가 있어야 한다.
세션 기반 인증 시스템
사용자가 로그인을 하면 서버는 세션 저장소에 정보를 조회하고 세션id를 발급한다. 발급한 세션id는 브라우저의 쿠키에 저장되며 사용자가 서버에 인증이 필요한 요청을 할 때마다 세션저장소에서 세션을 조회한 후 응답을 하게된다.
토큰 기반 인증 시스템
토큰은 로그인을 하면 서버에서 만들어 주는 문자열이다.
해당 문자열은 사용자의 정보가 들어있고, 해싱 알고리즘을 통해 암호화 되어 있다.
바로 localStorage를 이용해서 새로고침 시에도 로그인을 유지해야 한다.
(물론 다른 방법도 존재한다.)
브라우저에서 로그인을 한다면 백엔드에 로그인 정보를 전달이 될 것이다. 그러려면 cors 문제를 해결해야 한다.
cors 문제를 해결하기 위해서는 브라우저->front-server->backend-server 이런식으로 거쳐서 진행하거나(proxy)
cors 설정을 해서 브라우저에서 바로 백엔드 서버로 정보를 전달하고 응답을 한다.
쿠키,세션,토큰등이 필요한 이유는 백엔드에서 사용자 정보를 전부 들고 있다면 과부화가 걸리기 때문에 db 넣어주고 백 서버에서는 쿠키와 db에 연동되는 id만 가지고 있는다.
다시 돌아와서 이렇게 로그인을 했다면 백에서는 쿠키를 준다.
그렇다면 프론트에서는 로그인이 되었다면 로컬스토리지에 쿠키를 담아준다.
why ? 새로고침 시에 redux store는 초기화 되기 때문이다. 따라서 영구적으로 값을 저장할 수 있는 로컬 스토리지에 넣어두고
새로고침이 일어난다면 로컬스토리지에 인증값을 가지고 있는지 확인을 하고 이 값을 백에 전달해서 유저 정보를 들고 오는 과정이 필요하다(액션을 만들고 useEffect / index.js에서 dispatch를 해주면 된다)
이런 과정을 거친다면 새로고침을 해도 로컬 스토리지에 쿠키값이 저장되어있기 때문에 이 값을 이용해 로그인을 유지 할 수 있을 것이다.
