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

안녕하세요. 오늘은 저번 포스팅에 이어서 TypeScript 환경에서의 Express-session 로그인 처리 포스팅을 진행하겠습니다.

---

1. 작업환경
2. express-session, SessionData 수정
3. 로그인처리

---

1. 작업환경

운영체제	Windows 10 Pro
사용 툴	VSCode 1.59
node	v14.17.3
npm	6.14.13

---

2. express-session, SessionData 수정

대부분의 이 포스팅을 찾아오신 분들이 막혀서 진행 못했던 부분이라고 판단되는 부분입니다. 저도 이걸로 고생을 많이 했었습니다.

import 한 부분에서 "express-session" 부분에서 마우스 커서를 올리고 [F12]를 눌러 express-session 자체를 봅니다.

    interface SessionData {
        cookie: Cookie;
    }

중간에 (저는 213번째 줄에 있었습니다.)보면 SessionData 인터페이스를 정의한느 부분이있습니다. 여기에 필요한 정보를 추가 해주지 않으면 TypeScript에서는 Data를 추가할 수가 없습니다.

필요한 정보들을 추가해줍니다.

    interface SessionData {
        cookie: Cookie;
        email: string;
        isLogined: boolean;
        nickName: string;
    }

---

3. 로그인 처리

본격적으로 간단한 로그인 처리를 진행하겠습니다. 먼저 그전에 http method가 GET 이있던, 부분을 POST로 바꿔서 진행하도록 하겠습니다.

// 기존 소스
// controller.get("/test", (req, res) => {
//   console.log("TEST CONSOLE");
//   console.log(req.session);
// });

// 수정된 소스
controller.post("/test", (req, res) => {
  console.log("TEST CONSOLE");
  const session = req.session;

  res.send(`ya : ${req.body.ho}`);
});

 

Postman을 이용하여 정상적으로 post 요청이 들어오는지 확인해 봅시다.

ya에서 ho로 감싼 데이터가 정상적으로 보입니다. 

user/test 인 이유는 user로 라우터 처리한 파일에서 작업했기 때문입니다.

controller.post("/test", (req, res) => {
  console.log("TEST CONSOLE");
  const session = req.session;
  // request body 안에 내용이 있을 때
  if (req.body) {
    // 이미 로그인 중이 아니라면,
    if (!req.session.isLogined) {
      // session에 필요한 정보를 저장
      session.email = req.body.email;
      session.nickName = req.body.nickName;
      session.isLogined = true;
      session.save(() => {
        // session에 저장하고, 진행할 내용
        res.send({ result: true });
      });
    } else {
      res.send({ error: "Aleady Logined" });
    }
  }
});

코딩을 확인하고, 내용을 확인해 봅시다.

정상적으로 로그인 처리가 되었습니다. 다시 시도 해봅니다.

 

이미 로그인 중이라고 뜹니다. 

---

이로써 간단한 로그인 처리는 끝났습니다. 다음 포스팅에서는 쿠키에 저장되는 부분과, 일정기간동안 로그인 정보를 기억하는 방법을 다뤄 볼까합니다. 감사합니다.