Logged In User #01

이번에는 유저를 기억하는걸 만들어 볼거다.

누가 로그인 했는지 말이다. 그런데 사실 기억한다는 말이 안 어울릴지도 모르겠다.

왜냐하면 기억한다는건 오늘 뭔가를 배우고 잠에 들었다고 해본다.

그리고 다시 일어나면 배운걸 기억하고 있을거다. 핸드폰 번호를 기억하고 있듯이

잠에 들고 다시 일어나더라도 핸드폰 번호을 기억하고 있는 것처럼

그런데 서버는 이렇게 할 수 없다. 서버한테는 모든 요청으로 부터 id가 필요하다.

이걸 다 기억할 수는 없으니까 예를 들어, 누군가가 "너의 핸드폰 번호는 뭐니?" 라고 물어봤는데

누군지 모르겠다면 id카드를 받아서 "이게 너의 핸드폰 번호구나!" 라고 알수 있다.

그리고 잠에 들었다 다시 일어나서 핸드폰 번호가 뭐냐고 다시 물어보면

"너가 누군데?" 하고 물어보고 id카드를 받아서 id카드가 있으면 핸드폰 번호 알려줘도

되겠네 하고 알 수 있는거다. 그러니까 어떤 사람들도 기억하지 않는 거다.

id정보를 가진 DB를 만들고 누군가 id카드를 들고 찾아오면 그때 확인하는거다.

그러니까 기억하는거라고 말하기는 어렵다. 1초마다 까먹는 사람이랑 대화하는거랑 똑같은거다.

그게 바로 서버이다.

이제 여길 보면 세션 DB가 있는데

_LJRIAPlxO7fUVAYnBkjUDGQgdzvap0E: {
    cookie: { originalMaxAge: null, expires: null, httpOnly: true, path: '/' }
  },

뭘 할거냐면 userController로 가서

유저가 로그인하면 그 유저에 대한 정보를 세션에 담을거다.

  const ok = await bcrypt.compare(password, user.password);
  if (!ok) {
    return res.status(400).render("login", {
      pageTitle,
      errorMessage: "Wrong password",
    });
  }
  req.session.loggedIn = true;
  req.session.user = user;
  return res.redirect("/");
};

그리고 각 유저마다 서로 다른 req.session object를 가지고 있다는걸 기억한다.

왜냐하면 모두 서로 다른 id를 가지고 있으니깐 말이다. req.session.loggedIn = true라고 쓴다.

그리고 req.session.user로는 DB에서 찾은 user를 쓸거다.

이렇게 하면 세션에 정보를 추가하는거다.

각 브라우저마다 서로 다른 세션을 가지고 있다는걸 꼭 기억한다.

모든 브라우저가 똑같은 세션을 가지고 있는게 아니다. 다 다르다.

이제 세션에 loggedIn을 true로 추가했고 user를 세션에 저장하고 있다.

새로고침하고 login으로 가본다. 세션 DB를 한번 확인하고 로그인을 해본다.

보다시피 template에는 아무 변화가 없지만 세션 DB를 확인해보면 쿠키 id인 세션

id가 있는걸 볼수 있다. loggedIn이 true이고 user도 있다.

이제 다시 Home으로 가서 Search로 가본다. Upload Video로도 갔다가

다시 Home으로 가본다. 또 Search로 가보고, 이렇게 화면을 이동할때마다

백엔드에서 내가 로그인 했다는걸 알고 있다. 다른 브라우저로도 해본다.

다른 브라우저에서 Search로 가보면 이제 2개의 세션이 생긴걸 볼수 있다.

로그인한 유저가 하나 있고 로그인 하지 않은 유저도 하나 있다.

이렇게 누가 로그인했는지 안했는지 알수 있는거다.

이제 이거에 맞게 template을 수정해 볼거다. 만약 session.loggedIn이 true라면

Join과 Login을 가릴거다. 대신 Logout을 보여주게 만들거다.

그러면 템플릿에서 세션에 접근할수 있는지 확인해본다.

base.pug에서

body 
        header
            h1=pageTitle
            nav 
                ul 
                    li  
                        a(href="/") Home
                    if !req.session.loggedIn
                        li 
                            a(href="/join") Join
                        li 
                            a(href="/login") Login
                    li  
                        a(href="/search") Search
                    li 
                        a(href="/videos/upload") Upload Video

만약 loggedIn이 아니라면 Join과 Login을 보게 될거다.

base.pug에서 req.session.loggedIn에 접근할 수 있는지 확인해본다.

새로그침해보면 ... 안된다. 괜찮다 다른 방법으로 하면 된다.

누가 user인지 알수 있기에 여기 있는 세션 DB에서 말이다.

user: {
      _id: '625942ace3564e09811a5f21',
      email: '[email protected]',
      username: 'Cyber Lover',
      password: '$2b$05$WMO/VH/yctvvPJST0SyLq.QRQfSNeLJ5zAJPFfRMwLgg5ZFq1KtBm',
      name: 'Mercury',
      location: 'NYC',
      __v: 0
    }

그러니까 누가 유저인지는 알수 있는데 그 정보를 pug템플릿과 공유하지 못하는 거다.

이걸 공유 할수 있어야 한다. 이건 다음 파트에서 해보기로 한다.

어떤 문제가 발생했는지에 대해 잘 이해하고 넘어가는게 중요하다.

req.session object에 정보를 저장하고 있다. 유저가 로그인에 성공했는지 안했는지

상관없이 말이다. 어떤 정보든지 추가 할수 있는데 loggedIn과 user라는 정보를 추가했다.

그리고 세션이 두가지가 있는데 하나는 로그인한 세션이고 다른 하나는 로그인하지 않은 세션이다.