[JavaScript, Node.js] 유튜브 클론 정리 7장 (5) - Logged in

머리글

이번 시간에는 세션과 쿠키를 바탕으로 유저의 로그인 상태를 구현해 보자.

Logged In

기존에 로그인 자체는 구현했지만 로그인 상태를 구현을 하지 않아 로그인이 제대로 진행되지 않았었는데,
이 부분을 세션과 쿠키를 통해 해결해 보자.

서버는 유저를 기억하는 것이 아니라 유저가 올바른 접근 권한(쿠키)을 가져오면 알맞은 정보를 제공해 주는 방식이다.

우선 이를 위해 유저 컨트롤러에서 유저의 로그인 과정에 추가해야 할 것이 있다.

...
req.session.loggedIn = true;
req.session.user = user;
...

유저마다 서로 다른 쿠키를 가지고 있기 때문에,
서로 다른 session을 가지고 있다.

따라서 유저의 session에 로그인했다는 정보를 보내주자.
그리고 유저의 정보는 데이터베이스에 있는 유저의 정보를 바탕으로 세션에 기록해 주자.

이렇게 유저의 로그인 상태와 정보를 세션에 추가했다.

이제 로그인을 하게 되면 로그인 정보가 올바르게 세션에 추가된다.

템플릿을 살짝 수정해서 로그인 상태를 구분할 수 있게 해 보자.

PUG 템플릿은 기본적으로 locals라는 객체에 접근이 가능하다.
별도의 작업 없이 express와 공유가 가능하다.
또한, locals 객체는 전역 변수라서 모든 템플릿에서 사용이 가능하다.

이를 사용하기 위해 미들웨어를 하나 생성해 보자.

export const localsMiddleware = (req, res, next) => {
	res.locals.siteName = "사이트 이름";
    res.locals.loggedIn = req.session.loggedIn;
    next();
};

이제 템플릿도 수정해 보자.

...
if loggedIn
	li
    	a(href="/logout") Logout
    else
    	a(href="login") Login

locals의 객체는 locals.loggedIn과 같이 사용할 필요 없고 그냥 loggedIn과 같이 사용이 가능하다.

이렇게 템플릿을 구성하면,
로그인 상태일 때와 그렇지 않을 때 표기되는 네비게이션이 달라진다.

이제 로그인을 해보면 정상적으로 로그인이 작동되는 것을 볼 수 있다.

마무리

이번 시간에는 쿠키와 세션의 정보를 이용해서 로그인을 구현하는 방법을 알아보았다.

다음 시간에는 MongoStore를 이용해서 세션을 저장하는 방법을 알아보자.