Cookie:
쿠키는 그저 http의 stateless한 것을 보완해주는 도구
접속상태 저장경로: 클라이언트
장점: 서버에 부담을 덜어줌
단점: 쿠키 그 자체는 인증이 아님
Session:
접속 상태를 서버가 가짐 (stateful), 접속 상태와 권한 부여를 위해 세션아이디를 쿠키로 전송
접속 상태 저장 경로: 서버
장점: 신뢰할 수 있는 유저인지 서버에서 추가로 확인 가능
단점: 하나의 서버에서만 접속 상태를 가지므로 분산에 불리, 서버의 메모리에 세션 정보를 저장하고 있다.
"인증에 성공했음"을 서버가 알고 있다면, 매번 로그인할 필요가 없을 것입니다.
인증에 따라 리소스의 접근 권한(Authorization)이 달라집니다.
서버는 사용자가 인증에 성공했음을 알고 있어야 합니다.
클라이언트는 인증 성공을 증명할 수단을 갖고 있어야 합니다.
사용자가 인증에 성공한 상태는 세션이라고 부릅니다.
서버는 일종의 저장소에 세션을 저장합니다. 주로 in-memory(자바 스크립트 객체), 또는 세션 스토어(redis 등과 같은 트랜젝션이 빠른 DB)에 저장합니다.
세션이 만들어지면, 각 세션을 구분할 수 있는 세션 아이디도 만들어지는데, 보통 클라이언트에 세션 성공을 증명할 수단으로써 세션 아이디를 전달합니다.
이때 웹사이트에서 로그인을 유지하기 위한 수단으로 쿠키를 사용합니다. 쿠키에는 서버에서 발급한 세션 아이디를 저장합니다.
로그아웃은 다음 두 가지 작업을 해야 합니다.
서버의 세션 정보를 삭제해야 합니다.
클라이언트의 쿠키를 갱신해야 합니다.
서버가 클라이언트의 쿠키를 임의로 삭제할 수는 없습니다. 대신 set-cookie로 세션 아이디의 키값을 무효한 값으로 갱신해야 합니다.
express-session
세션을 대신 관리해주는 'express-session'이라는 모듈이 존재
'express-session'은 세션을 위한 미들웨어로, 'Express'에서 세션을 다룰 수 있는 공간을 보다 쉽게 만들어 줍니다. 또한 필요한 경우 세션 아이디를 쿠키에 저장하고, 해당 세션 아이디에 종속되는 고유한 세션 객체를 메모리에 저장합니다. 이때 세션 객체는 서로 독립적인 객체이므로 각각 다른 데이터를 저장할 수 있습니다. req.session이 바로 세션 객체이며 req.session은 세션 객체에 세션 데이터를 저장하거나 불러오기 위해 사용합니다.
- Server 구현
-
controller 서버 구현(login)
로그인 서버에서 중요한 포인트는 findOne메서드를 활용해서 디비 정보를 조회하는 것이다. 로그인을 할 때는 아이디와 비밀번호를 가져오는 작업을 한다.
두번째로 중요한 포인트는 세션객체 아이디에 유저정보의 아이디를 넣어주는 작업을 하는 것이다. 넣어주는 방법은 req.session.sid를 활용하면 된다. (sid 대신 userId를 해도 된다. sid는 세션id란 뜻으로 통상적으로 많이 쓴다.) -
controller 서버 구현(logout)
로그아웃의 핵심은 세션객체 안에 있는 아이디를 삭제하는 것이다. 세션 아이디를 삭제하는 방법은 req.session.destroy()를 사용하면 된다. 혹은 빈 문자열을 넣어도 상관없다. -
controller 서버 구현(userinfo)
userinfo 부분은 세션객체에 있는 아이디를 잘 활용해서 로직을 작성하면 됩니다. 세션객체에 유저에 대한 정보가 다 있기 때문에 아이디만 조회해서 로직을 작성하면 됩니다.
- Client 구현
-
login page
로그인 페이지의 핵심은 로그인이 된 후 바로 유저 정보를 받아와서 마이페이지로 들어갈수 있도록 로직을 작성해야 합니다. 그래서 로그인을 할때 로그인서버에 요청하여 로그인상태를 변경하고 사용자의 정보를 get 요청해서 setUserInfo함수를 활용해서 유저의 상태정보를 변경할수 있도록 로직을 작성하면 됩니다.
여기서 중요한 점은 withCredentials:true 입니다. 이 설정은 서버에서 cors에서 옵션을 credentials:true 했으면 클라이언트에서 무조건 해야되는 설정입니다. 이 설정을 해야 쿠키가 잘 전송됩니다. -
Mypage
handleLogout과 화면에 랜더링 되는 fill_me_in을 채워주면 된다.
props를 콘솔에 찍어보면 사용해야하는 유저 데이터를 넘겨주고 있다.
{ userData: { id: 0, userId: 'test', email: 'test@test.com' } }
props.userData를 사용해서 fill_me_in을 채워주고 서버와 연결해주면 된다.
이번에는 axios를 사용해 봤다.
