[Youtube 클론코딩] 로그인 유지

앞서 살펴본 쿠키와 세션을 이용해 로그인 유지 기능을 구현해보자.

[Youtube 클론코딩] 쿠키와 세션 (tistory.com)

[Youtube 클론코딩] 쿠키와 세션

 

먼저 세션 기능을 사용하기 위해서는 express-session 패키지를 설치해야 한다.

express-session - npm (npmjs.com)

express-session

/src/server.js

위처럼 페이지 라우팅 이전에 세션 설정을 추가한다.

이후 잘 연결됐는지를 확인하기 위해 middleware를 통해 req.headers.cookie와 sessionsStore를 확인해본다.

페이지를 새로고침해보면 출력된다.

웹 서버에 세션쿠키가 정상적으로 등록된 것을 확인할 수 있다.

여기서 주목할 것은, 쿠키가 저장된 객체의 ID가 실제 브라우저에 저장된 쿠키와 일치한다는 것이다.

y_L1Al ... 이 동일하다.

즉, 웹 서버가 클라이언트에 세션정보가 담긴 connecte.sid 쿠키를 발행했고, 그 정보를 웹 서버에 저장했다는 의미다.

 

세션 정보에 변수 저장하기

웹 서버에 저장된 세션 정보는 '객체'이기 때문에 다른 속성(변수)를 추가로 저장할 수 있는데,

또 다른 미들웨어를 생성해서 알아보면 다음처럼 정보가 저장되는 것을 알 수 있다.

바로 session.potato를 이용하면 속성이 추가된다.

서버에 이렇게 저장된다.

로그인 유지 기능 구현하기

위에서 살펴본 대로 세션 정보에 유저 정보를 저장하면 로그인 유지 기능을 구현할 수 있다.

기존에 만들었던 postLogin() 함수에서 다음처럼 세션에 로그인 정보와 유저 객체를 넘겨주자.

이제 로그인을 하게 되면 세션 정보에 유저 객체가 저장되는 것을 볼 수 있다.

저장된 정보를 토대로 이제 pug파일을 수정해야 하는데, 어떻게 해야 세션 정보를 pug파일에서 사용할 수 있을까?

 

답은 'response.locals' 이다.

response를 콘솔에 출력해보면 다음처럼 locals 라는 속성이 존재하는데, 이는 JS와 pug가 함께 사용하는 공간이다.

/src/middlewares.js

이제 페이지가 요청될 때마다 로그인 여부를 확인할 수 있도록 미들웨어를 하나 만들어주자.

위처럼 req.session의 정보를 res.locals에 저장해주는 로직을 구성해준뒤 pug에서 다음처럼 수정해주자.

pug에서 locals의 변수를 사용할 때는 따로 locals.변수명 이 아닌 바로 변수명을 사용해주면 된다.

이랬던 네비게이션이

이렇게 바뀌었다.

 

이미 모든 Template는 locals를 import하고 있으므로, locals의 변수들은 전역적으로 사용 가능하다.