TypeScript, Express-session 을 이용한 로그인 처리 (1)

안녕하세요. 오늘은 페이지마다 로그인 유무를 확인하고, 로그인 정보를 기억하는 등 활용성이 좋은 Express-session을 이용한 방법을 포스팅하겠습니다.

---

1. 작업 환경
2. 개념
3. 설치 및 세팅

---

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

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처리해두시는 걸 권장합니다.

세팅이 된 듯 하니 다시 테스트를 진행해보겠습니다.

정상적으로 보입니다. 세팅은 여기서 끝내고,

---

다음 포스팅 때에는 본격적으로 로그인 처리에 대해서 진행해보도록 하겠습니다.