[유튜브 클론코딩] 6.4 Sessions on Express

6.4 Sessions on Express

세션 설치하기

npm install express-session

 

app.js에 import 해주고 session 작성하기

import express from "express";

import morgan from "morgan";

import helmet from "helmet";

import cookieParser from "cookie-parser";

import bodyParser from "body-parser";

import passport from "passport";

import session from "express-session";

import userRouter from "./routers/userRouter";

import videoRouter from "./routers/videoRouter";

import globalRouter from "./routers/globalRouter";

import routes from "./routes";

import { localsMiddleware } from './middlewares';

import "./passport";

const app = express();

app.use(helmet());

app.use(function(req, res, next) {

    res.setHeader("Content-Security-Policy", "script-src 'self' https://archive.org");

    return next();

    });

app.set("view engine", "pug");

app.use("/uploads", express.static("uploads"));

app.use("/static", express.static("static"));

app.use(cookieParser());

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({extended: true}));

app.use(morgan("dev"));

app.use(session({

    secret: process.env.COOKIE_SECRET,

    resave: true,

    saveUninitialized: false

}));

app.use(passport.initialize());

app.use(passport.session());

app.use(localsMiddleware);

app.use(routes.home, globalRouter);

app.use(routes.users, userRouter);

app.use(routes.videos,videoRouter);

 

export default app;

 

↑ app.js

app.js에 session을 import해준다.

그리고 app.use(session({}) 을 작성해 줄 것인데, 여기엔 몇 가지 옵션이 필요하다.

• secret 옵션:  secret이란 무작위 문자열로서, 쿠키에 들어있는 session ID를 암호화하기 위한 것이다.

(예를 들어서, session ID를 전송할 때 실제로 그 ID 값을 그대로를 보내는 것은 아니다. 실제로는 무척이나 암호화된 상태로 보낸다. 왜냐면 누군가 이 정보를 알게 되는건 원치 않기 때문이다. 누군가 이 사람 ID가 1번이구나 이런 식으로 알게되는게 싫기 때문에 보낼때는 아주 엉망진창인 알아볼 수 없는 상태로 만들어서 보내고 싶다. 그러므로 secret은 꼭 들어가야할 옵션이다.)

 

• 랜덤문자열 얻는 사이트: https://randomkeygen.com/

 

그리고 이것을 바로 secret에 넣어주기 보다는 .env에다가 넣어준다.

왜냐하면 사람들이 이 secret을 보는 것을 원하지 않기 때문이다.

 

MONGO_URL = "mongodb://localhost:27017/mytube"

PORT=4000

COOKIE_SECRET="Z|cJ@gG@|kxRr$l<a#xdl5+Wmts9R("

↑.env

 

이제 만든 아이디로 로그인을 해보면, 콘솔 -> application -> cookie -> localhost:4000을 보면 쿠키가 만들어졌다.

쿠키 값이 엄청 긴 것을 볼 수가 있는데, 이게 바로 내 ID가 암호화된 모습이다.

 

middleware.js로 가서 로그인된 사용자가 누구인지 출력해보기

import multer from "multer";

import routes from './routes';

const multerVideo = multer({dest: "uploads/videos/"});

export const localsMiddleware = (req, res, next) => {

    res.locals.siteName = "MyTube";

    res.locals.routes =  routes;

    res.locals.user = req.user || null;

    console.log(req.user);

    next();

};

export const uploadVideo = multerVideo.single("videoFile");

↑ middleware.js

다음과 같이 작성하고 실행한 후 로그인을 해보면

 

{

  _id: 60485f80df15a15144eb388c,

  name: '냥인',

  email: 'zzzzzz@naver.com',

  __v: 0

}

 

콘솔 터미널에 다음과 같이 잘 뜬다.

 

템플릿 수정하기

header.header

    .header__wrapper

        .header__column

            a(href=routes.home,title="홈")

                i.fab.fa-youtube

                span #{siteName}

        .header__column

            form(action=routes.search, method="get")

                input(type="text", placeholder="검색", name="term")

                button(type="submit", value="Search", title="검색")

                    i.fas.fa-search

        .header__column

            ul

                if !user

                    li

                        a(href=routes.join, title="회원가입") Join

                    li

                        a(href=routes.login, title="로그인") Log In

                else 

                    li

                        a(href=`/videos${routes.upload}`, title="동영상 업로드") Upload

                    li

                        a(href=routes.userDetail(user.id), title="프로필") Profile

                    li

                        a(href=routes.logout, title="로그아웃") Log Out           

↑ header.pug

임시로 썼던 isAuthenticated는 이제 없으므로 다음과 같이 수정한다.

 

이제 실행해보면 로그인이 되어 있기 때문에 헤더가 upload, profile, log out이 뜨는 것을 볼 수가 있다.

아까 req.user를 콘솔로 출력해봤었는데, 그건 로그인할때만이 아니라 upload를 눌러도 그렇고 다 뜬다.

req.user는 한번 로그인이 된 이상 이 어플리케이션 어디든 있다. 이게 가능한 이유는 쿠키 때문이다.

 

express는 session을 이용해서 쿠키를 그 손에 쥘 수 있게 된 것이다.

passport를 통해서, 우린 session을 이용하는데, 즉 session이 가진 쿠키를 이용한다는 것을 의미한다.

그리고 그 passport로 deserialize를 진행하는 것이다. 왜냐하면 session은 쿠키를 해독한다. 예를 들어 우리가 가진 이 괴상한 쿠키를 해독하는 것이다. 해독되어서 실제 ID가 되는 것이다.

그리고 그 ID는 passport로 넘어가게 된다.

passport로 넘겨지면, deserializeUser라는 함수가 실행된다.

deserialize로 사용자를 식별하게 되면 passport는 방금 찾은 그 사용자를 middleware나 routes의 request object에 할당하게 된다.

 

join후 자동으로 로그인

join후 자동으로 로그인이 되나 해보면 잘 된다

 

저장하고 서버를 새로 시작하면 로그아웃이 되어버리는 문제

서버를 매번 새로 실행시킬 때마다 세션 정보를 잃게 된다.

왜냐하면 지금은 세션 정보, 쿠키 정보들을 메모리에 저장하고 있기 때문이다.

이거는 바꾸어야 한다.

서버는 어느 사용자가 어느 쿠키를 가지고 있는 지를 기억해야 한다.

다음 시간에..