사용자 비밀번호 비교해서 bcrypt.compare(지금입력한 비번,사용자비번) 로그인하기를 했고
이젠
로그인 유지하기 - 쿠키와 세션
세션: 백엔드와 브라우저 간에 어떤 활동을 했는지 기억하는 것
백엔드와 브라우저간에 history
한번 연결 됐다가 끝나는거 stateless
유저가 로그인할 때 유저에게 어떤 텍스트를주고
유저가 누구인지 알수있게한다.
요청을 할 때마다 텍스트를 요구한다.
미들웨어 express-session : express에서 세션을 처리할 수 있게 해줌
npm i express-session 설치후
server.js에 import session from "express-session";
router 전에 설정해주면됨
app.use(session({
secret: "Hello!",
resave:true,
saveUnintialized:true,
}));
이 세션 미들웨어가 자동으로 sessionID를 쿠키에 담아서 브라우저에 보낸다.
session data는서버에 저장 됨
브라우저가 localhost:4000에 모든 url에 요청을 보낼 때마다 id와 함께보냄
들어온 사람에게 텍스트를 주고 그 텍스트를 가지고 유저가 누구인지 알아냄
이제 새로고침을 하면 브라우저가 서버에게 요청을보내고 서버에서는 session 미들에워가 브라우저에게 텍스트를 보냄 서버가 브라우저를 개벌적으로 기억 할 수있도록
브라우저가 알아서 서버에게 쿠키를 보냄
1. 브라우져 서버에 접근
2. 서버가 브라우져에게 Cookie 준다.
3. 브라우져가 서버에 다시 접근할 때 2.에서 저장한 session ID.
4. express 에 저장된 session ID를 통해 브라우져를 구분 할 수 있다.
express가 session을 memroy에 저장하고있기 때문에
server 를 껐다 키면 session 사라짐
session과 sessionID는 브라우저를 기억하는 방법이다.
브라우저와 백엔드 사이에는 wifi처럼 계속 유지되는 연결이 없으니까
백엔드에 요청을 보낼 때마다 이 id를 같이 보내줘야함
백엔드는 세션 id로 브라우저를 구분하고 기억함 .
app.use((req, res, next) => {
req.sessionStore.all((error, sessions) => {
console.log(sessions);
next();
});
});
///terminal
[Object: null prototype] {
m34zFF4YnIE4QqLdaIIRCwQoUSNeGrUV: { //구분하는 키
cookie: { originalMaxAge: null, expires: null, httpOnly: true, path: '/' }
}
}
sessionID를 가지고 있으면 session Object에 정보를 추가 할 수있음
app.get("/add-one", (req, res, next) => {
req.session.potato += 1;
return res.send(`${req.session.id}\n${req.session.potato}`);
});
id,1
id,2
id,3
id,4로 바뀜
세션은 서버측에서 제공해주는 데이터, 쿠키는 클라이언트측에서 저장하고 사용하는 데이터
req.sessiontStore() 사용했을때 한번은 undefined가 나온 이유가 세션은 서버에서 만들어줘야 하는데 클라이언트가 첫 요청때 세션을 가지고있을리 없으니 undefined이 나온거고 그 이후 요청부턴 첫번째 요청때 세션을 만들어서 넘겨줬으니 클라이언트가 해당 값을 쿠키에 저장하고 매 요청때마다 서버에게 전달
세션은 서버가 만들어서 제공해주다보니 서버가 재부팅되면 초기화 된다. (그래서 DB에 저장해서 관리를 한다는 소리. 실 운영에선 서버가 꺼지는 일은 없으니깐.)
세션의 값은 서버가 만들어주는 고유값이다보니 해당 값을 기준으로 클라이언트에서 요청한 건에 대해 유저를 특정지을 수 있다
서버가 세션을 생성한 기점은 middleware로 express-session을 추가했을때부터 생성됨
ㅗ그인 유저 기억하기
유저가 로그인하면 그 유저에대한 정보를 세션에 담기
export const postLogin = async (req, res) => {
const { username, password } = req.body;
const pageTitle = "Login";
const user = await User.findOne({ username });
if (!user) {
return res.status(400).render("login", {
pageTitle,
errorMessage: "An account with this username does not exists"
});
}
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; //session.user는 위에 찾은 유저 정보
return res.redirect("/");
}
//로그인하고난후 terminal
POST /login 302 107.528 ms - 46
[Object: null prototype] {
GxLVtiYGBFclib7KMUIP9dSRzpZ_vpXE: { //session id
cookie: { originalMaxAge: null, expires: null, httpOnly: true, path: '/' },
loggedIn: true, //추가된 프로퍼티들
user: {
_id: '61af455cd710bf2765619ef6',
email: 'ddd@ddd',
username: 'hi',
password: '$2b$05$9LtPkTQF8LeXfW2QwMdcnewy4gNfE.L0mBWAGYmejN2kZouT5GMxq',
name: 'hi',
location: 'hi',
__v: 0
}
}
}
req.session.object에 추가함
로그인, 검색, 가입 등등 페이지를 request 할 때마다 해당 정보를 가지고있음
로그인 했을 때 template 바꾸기
로그인 했을 때 join과 login가리고 logout 표시
그러면 템플릿에섯 세션을 접근 할 수있는가?
--> 안됨 해당 정보를 pug 템플릿과 공유하지 못한다.
if !req.session.loggedIn
li
a(href="/join") Join
li
a(href="/Login") Login
안됨!!!
몽고스토어는 세션을 몽고와 연결해주어서 세션을 몽고에 저장할 수 있도록 해주는거 같아요.
