Logged in User

로그인 상태를 유지하는 것처럼 보이도록 하기. (사실은 id를 매 요청에 함께 보내고 이를 백엔드에서 sessionDB내의 id와 대조시켜서 그 정보를 제공하는 것임. 즉, 기억하는 것은 아님.)

1. user가 로그인 하면 그 유저의 정보를 session에 담기.

-> 각 유저마다 서로 다른 req.session object를 가진다는 걸 기억하셈.

• userController

//postLogin 컨트롤러에 추가(로그인 됐을 때)
req.session.loggedIn = true;
req.session.user = user;//우변의 user = await User.findOne({username}) -> 세션에 정보 담기.

유저가 로그인 하면 아래처럼 user, loggin정보가 세션에 들어갈 것임.

2. logged in 상태일 때 템플릿 수정하기.

locals(전역 변수=global) object 이용.

locals object: middleware를 통해 router전에 데이터를 넣어준다면, data를 backend와 template에서 서로 공유해 사용할 수 있도록 해주는 곳.
-> pug템플릿에서 바로 req.session에는 접근할 수 없지만, res.locals에는 접근 가능함.(pug랑 express가 locals를 서로 공유하도록 자동으로 설정돼 있음.). 또한 locals object는 이미 pug template에 import된 상태임.

• server.js에서 콘솔창으로 보는 방법

app.use((req,res,next) => {console.log(res.locals)})//middleware로 사용 ㄱ ㄱ

middleware.js 생성 (locals에 req.session을 넣기 위한 파일임. 좀 깔끔하게 보일라고.)

1. src/middleware.js생성
2. server.js에 이런식으러 import하고, router바로 앞에 사용 ㄲ

import { localsMiddleware } from "./middlewares";

app.use(localsMiddleware);
app.use("/",rootRouter);
app.use("/videos",videoRouter);
app.use("/users",userRouter);

3. middleware.js안에 작성 ㄱ

export const localsMiddleware = (req, res, next) => {
    //console.log(req.session);
    res.locals.loggedIn = Boolean(req.session.loggedIn);//local안에 session의 loggedIn을 넣어줌
    res.locals.loggedInUser = req.session.user;
    res.locals.siteName = "Wetube";
    console.log(res.locals)
    next();
}

-> 이렇게 해주면 locals안에 session내에 있는 data가 들어갈 수 있음.

정리

-> (postLogin컨트롤러 내) req.session 내에 login상태와 user정보를 넣어줌
-> (middleware.js 내) session내의 login상태와 user 정보를 locals에 넣어줌.
-> locals내에 있는 정보를 템플릿에서 사용(템플릿, backend 등 전역에서는 locals에 접근 가능.
특히 템플릿은 res.session에 바로 접근할 수 없으므로, locals에 session의 data를 넣어서 이용해줘야함.)

템플릿 수정

• base.pug: 템플릿에서는 locals에 그냥 접근 가능(res.locals.loggedIn 이런식으로 접근 안해도 되고 그냥 loggedIn적으면 알아서 locals에 접근함.)

nav 
                ul 
                    li 
                        a(href="/") Home
                    if loggedIn 
                        li 
                            a(href="/logout") Log Out
                        li 
                            a(href="/my-profile") #{loggedInUser.name}의 profile
                    else 
                        li 
                            a(href="/join") Join
                        li 
                            a(href="/login") Login 
                    li 
                        a(href="/search") Search
                    li 
                        a(href="/videos/upload") Upload Video

최종 코드

• base.pug는 위의 것과 같음.
• userController: postLogin

export const postLogin = async(req,res) => {
    const {username, password} = req.body;
    const pageTitle = "Login";
    const user = await User.findOne({username})//우리가 찾을 password를 찾을 DB 불러오기
    if(!user){
        return res.status(400).render("login",{pageTitle, errorMessage:"An account with this username doesn't exists."});
    }
    const ok = await bcrypt.compare(password, user.password);//출력값은 true/false임.
    if(!ok){
        return res.status(400).render("login",{pageTitle, errorMessage:"Wrong password"});
    }
    req.session.loggedIn = true;
    req.session.user = user;//우변의 user = await User.findOne({username}) -> 세션에 정보 담기.
    return res.redirect("/");
}

• middleware.js

export const localsMiddleware = (req, res, next) => {
    //console.log(req.session);
    res.locals.loggedIn = Boolean(req.session.loggedIn);//local안에 session의 loggedIn을 넣어줌
    res.locals.loggedInUser = req.session.user;
    res.locals.siteName = "Wetube";
    console.log(res.locals)
    next();
}

• server.js

import express from "express";// 혹은 "node_modules/express"
import { urlencoded } from "express";
import morgan from "morgan";
import session from "express-session";
import rootRouter from "./routers/rootRouter";
import userRouter from "./routers/userRouter";
import videoRouter from "./routers/videoRouter";
import { localsMiddleware } from "./middlewares";

const app = express(); 
const logger = morgan("dev");

app.set("view engine","pug");
app.set("views",process.cwd() + "/src/views");//process.cwd: 현재 작업중인 파일 위치.
app.use(logger);
app.use(express.urlencoded({extended:true}));//form의 내용을 js의 array object 형태로 바꿔줌-> req.body를 생성함!


app.use(
    session({
        secret:"Hello!",
        resave: true,
        saveUninitalized: true,
}));

app.get("/add-one",(req,res,next)=>{
    return res.send(`${req.session.id}`);
});

app.use(localsMiddleware);
app.use("/",rootRouter);
app.use("/videos",videoRouter);
app.use("/users",userRouter);


export default app;