안녕하세요. 오늘은 페이지마다 로그인 유무를 확인하고, 로그인 정보를 기억하는 등 활용성이 좋은 Express-session을 이용한 방법을 포스팅하겠습니다.
- 작업 환경
- 개념
- 설치 및 세팅
1. 작업환경
운영체제 | Windows 10 Pro |
사용 툴 | VSCode 1.59 |
node | v14.17.3 |
npm | 6.14.13 |
2. 개념
Java로 Sping 공부하신 분들은,
request.getSession().setAttribute("user", user);
대략 이런 식으로 session에 로그인된 user 정보를 저장해 두신다는 걸 알 겁니다. 왜 이렇게 해야 할까요? 브라우저에도 Session Storage가 있던데 그걸 이용하면 안 되는 걸까요? Session Storage에 저장해두면, 세션 종료될 때 소멸되니까 관리도 편할 텐데요..
정답은 안됩니다. 불가하다고 생각하시는 게 나을듯합나다. 앞서 인사말에서 말했듯, 페이지에서 로그인 유무를 확인해야 하거나, 또는 로그인 정보에 따른 권한 처리를 해주고 싶을 때 만약 브라우저의 Session Storage에 저장한다면 매우 위험한 결과를 보실 수 있습니다.
Session Storage가 있습니다. 여기에는 개발자 툴을 켤 수만 있는 사람이라면, 바로 Session을 추가하고, 수정할 수 있습니다.
그냥 따닥 더블클릭하고 생성하 기만하면 됩니다. 이걸 다시 더블클릭하면?
정말 쉽게 수정이 가능합니다. 그렇기에 브라우저 Application에 직접 중요 정보를 저장하는 것은 매우 위험한 일이 될 수 있습니다. 그렇기에 로그인 정보같이 중요한 정보는 브라우저가 아닌, 서버 쪽에 저장하는 것이 중요합니다.
3. 설치 및 세팅
우선 express의 미들웨어 중 하나인 express-session을 설치하도록 하겠습니다.
npm install express-session
// express-session 설치
npm i --save-dev @types/express-session
// typeScript가 이해 할 수 있도록 설치
제가 설치 명령어를 install로 사용할 때도 있고 i로 사용할 때도 있습니다. 무관하니 편한 거 사용하시면 됩니다.
https://www.npmjs.com/package/express-session
설치 전에는 request에서 session을 봐도 값을 볼 수가 없습니다.
controller.get("/test", (req, res) => {
console.log("TEST CONSOLE");
console.log(req.session);
});
이제 설치가 완료되었으면 사용해서 콘솔이 잘 나오도록 세팅합시다.
import { Router } from "express";
import session from "express-session";
// "express-session"에 빨간 밑줄이 생기신 분들은, @Type이 잘 설치 되었는지 확인 바랍니다.
import ServerConfig from "server/serverConfig";
// 중요한 정보들은 따로 파일로 관리하는것이 안전합니다.
const controller = Router();
// 저는 라우터를 사용해서 따로 뺐지만,
// const app = express(); 에다가 작업하셔도됩니다.
controller.use(session(ServerConfig.expressSession.option));
// express 에다가 미들웨어를 올려줍니다
/* session(ServerConfig.expressSession.option 내용입니다
expressSession: {
option: {
secret: "비밀키",
resave: false,
saveUninitialized: true,
},
},
*/
/* 이런식으로 사용하셔도됩니다.
controller.use(session({
secret: "비밀키",
resave: false,
saveUninitialized: true,
}));
*/
비밀키라고 적어둔 부분으로 암복호화가 진행되는 듯합니다. 정보가 유출되지 않도록 따로 파일로 보관하여 만들어 주는 것을 권장합니다. github에 올리는 코드라면, gitignore처리해두시는 걸 권장합니다.
세팅이 된 듯 하니 다시 테스트를 진행해보겠습니다.
정상적으로 보입니다. 세팅은 여기서 끝내고,
다음 포스팅 때에는 본격적으로 로그인 처리에 대해서 진행해보도록 하겠습니다.
'BackEnd > Express(Node)' 카테고리의 다른 글
TypeScript, Express-session 을 이용한 로그인 처리 (2) (2) | 2021.09.11 |
---|---|
TypeSrcript를 사용하여 Express 세팅 (0) | 2021.08.22 |