이번에는 우리가 흔히 아는 쿠키와 세션에 관해서 한 번 공부해 보았다.
쿠키와 세션의 차이점은 쿠키는 웹 브라우저 세션은 웹 서버에 정보가 저장되는 것이라 보면 된다.
쿠키
이번에는 cookie-parser라는 모듈을 사용할 것이다.
npm install cookie-parser --save미리 모듈을 다운 받아주고 시작을 해야한다.
var cookieParser = require('cookie-parser');일단 모듈 선언을 당연하게 하고 시작한다. cookiParser로 cookie-parser 모듈을 다룰 것이다.
app.use(cookieParser());그리고 쿠키 파서를 사용. 이라는 의미로 use를 사용하는 것 같다.
이후 router.route를 사용해서 쿠키를 작성할 것이다.
router.route('/process/showCookie').get(function(req,res){
console.log('/process/showCookie 호출됨');
res.send(req.cookies);
});
router.route('/process/setUserCookie').get(function(req,res){
console.log('/process/setUserCookie 호출됨.');
res.cookie('user',{
id : 'mike',
name : '소녀시대',
authorized: true
});
res.redirect('/process/showCookie');
});이게 쿠키의 router 코드이다. 일단 실험용이니 간단하게 만들어서 사용한다. 이 코드는 user라는 이름의 id, name, authorized의 데이터를 가지고 있는 쿠키를 redirect로 showCookie로 보내서 send를 통해 cookie저장소로 보내게 된다.
setUserCookie에 들어가면 redirect로 인해서 자동으로 showCookie로 보내지게 되고 cookie가 저장된 것을 개발자 도구의 cookies를 통해서 볼 수 있다.
세션
이번에는 세션이다. 세션은 express-session 모듈을 사용할 것이다.
npm install express-session --save책에서는 같이 사용한다고 한다. 코드가 너무 길어지니 위와 같이 핵심 적인 부분만 적어보겠다.
var expressSession = require('express-session');cookie-parser와 같이 미리 선언을 해서 지정을 한 후
app.use(expressSession({
secret:'my key',
resave:true,
saveUninitialized:true
}));이렇게 모양을 만들어 준다.
secret – 쿠키를 임의로 변조하는것을 방지하기 위한 값이고 이 값을 통하여 세션을 암호화 하여 저장한다.
resave – 세션에 요청이 들어간 후에 세션의 변동 유무와 관계없이 무조건 저장한다는 옵션으로 기본적으로 false를 권장한다.(책에서는 true로 적혀있다.)
saveUninitialized – 세션이 저장되기 전에 uninitialized 상태로 미리 만들어서 저장한다.
이외에도 다양한 옵션이 존재한다만 책에서 다루는 옵션은 이렇게 3가지 뿐이다.
router.route('/process/product').get(function(req, res){
console.log('/process/product 호출됨');
if(req.session.user){
res.redirect('/public/product.html');
}
else{
res.redirect('/public/login2.html');
}
});이전의 코드에서 router 부분에 추가 시키는 코드이다. product.html은 새로 만든 html 파일로 코드는
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 페이지</title>
</head>
<body>
<h3>상품정보 페이지</h3>
<hr/>
<p>로그인 후 볼 수 있는 상품정보 페이지입니다.</p>
<br><br>
<a href='/process/logout'>로그아웃하기</a>
</body>
</html>크게 특이한 점은 없고 단지 마지막에 로그아웃하기 라는 하이퍼링크 테스트를 누르면 /process/logout으로 이동하는데 이 부분 또 한 만들어 주었다.
router.route('/process/logout').get(function(req,res){
console.log('/process/logout 처리함');
if(req.session.user){
console.log('로그아웃합니다.');
req.session.destroy(function(err){
//if (err){throw err;}
console.log('세션을 삭제하고 로그아웃되었습니다.');
res.redirect('/public/login2.html');
});
} else {
console.log('아직 로그인되어 있지 않습니다.');
res.redirect('/public/login2.html');
}
});이 /process/logout은 세션의 확인을 위해서 만들었다. 로그아웃 버튼을 눌렀을 때 세션의 유무에 따라서 세션이 만약 존재한다면 로그아웃을 하고 세션이 존재하지 않는다면 아직 로그인을 하지 않았다고 console.log로 표시하는 방식으로 만들어져 있다.
그리고 로그인을 했을 경우 세션을 연결 해줘야하는데
router.route('/process/login').post(function(req,res){
console.log('/process/login 처리함');
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
if(req.session.user){
console.log('이미 로그인되어 상품 페이지로 이동합니다.');
res.redirect('/public/product.html');
} else{
req.session.user = {
id:paramId,
name:'소녀시대',
authorized:true
};
}
res.writeHead('200', {'Content-Type' : 'text/html; charset=utf8'});
res.write('<h1>로그인 성공</h1>');
res.write('<h1><p>ParamID : '+ paramId +'</p></h1>');
res.write('<h1><p>ParamPASSWORD : '+ paramPassword +'</p></h1>');
res.write("<br><br><a href='/process/product'>상품 페이지로 돌아가기</a>");
res.end();
});이건 로그인 코드이다. 밑의 writeHead 부터는 동일 하지만 위의 부분은 다르다. 조건 문이 하나 들어간는데 마찬가지로 세션이 있다면 이미 로그인 되어 있다고 표시하며 상품페이지로 이동하고(redirect에 의해서 강제로 이동된다.) 만약 그게 아니라면 로그인된 상황을 보여준다.
위의 내용을 기반으로 로그인을 하면
이런식으로 로그인을 완료한 정보가 뜬다.
그리고 상품 페이지로 이동하면 위의 상품정보 페이지가 나온다.
이렇게 쿠키를 확인 해볼 수 있다. 하지만 이번에 한 것은 세션이기 때문에 여기서 localhost:3000/public/login2,html로 가게 되면 session이 유지 되어 바로 상품정보 페이지로 돌아오게 된다.
위의 진행 방식으로 로그인 이후 상품 페이지로 이동후 로그아웃 처리를 하지않고 다시 로그인 페이지로 이동해서 로그인을 하게 되면 기존에 남아있는 세션 때문에 로그인 완료 페이지가 아니라 상품 페이지로 이동하게 된다.
경로 문제에 관해서
이렇게 책을 따라서 코드를 쭈욱 적어보면서 하나씩 이곃나가고 있다. 공부법이 이게 맞는지는 잘모르겠지만 일단 문제가 발생하면 그 때 그 때 문제를 해결하는 방법으로 나갔다.
책에서는 이미 static 모듈을 사용하지 않고 있지만 나는 계속 사용하고 있어서 경로 설정에서 문제가 발생했다.
app.use(express.static('public'));위의 코드에서 문제가 발생하였다.
책에서 로그인을 진입할 때는 http://localhost:3000/public/login2.html이라고 적혀있고 나의 코드에서는 http://localhost:3000/login2.html 로 들어가기 때문이다.
그렇다고 static 모듈을 무작정 지우니 404에러가 뜨면서 진입 자체가 안되서 상당히 골치 아팠다. 그래서 결국 타협 본 것이
app.use(express.static('.'));static을 현재 경로로 지정을 해서 해결하긴 하였다. 하지만 이것도 좀 불안정하고 깔끔하지 못하기 때문에 어떻게든 해결을 해봐야할 것 같다.
'공부 > Node.js' 카테고리의 다른 글
| [Node.js] express로 웹 서버 만들기(MongoDB) (0) | 2020.08.10 |
|---|---|
| [Node.js] express로 웹 서버 만들기(multer미들웨어, 이미지 업로드) (0) | 2020.08.10 |
| [Node.js] express로 웹 서버 만들기(static 미들웨어, 라우팅) (0) | 2020.08.07 |
| [Node.js] express로 웹 서버 만들기(요청 객체와 응답 객체) (0) | 2020.08.07 |
| [Node.js] express로 웹 서버 만들기(use() 미들웨어) (0) | 2020.08.07 |
