Express에서 로그인 서비스 만드는 방법 with.Session

 

 

 

이미 7월 달에 세션으로 로그인 하는 서비스를 만들어본 경험이 있다.

근데 이번에 로그인 서비스를 구현할려고 하니 기억이 안나서 구글링이나 하고 있어 직접 포스팅을 해야겠다는 필요성을 느꼈다.

개발자 글쓰기 주제를 못 정하겠다면 나처럼 구글링 한 내용을 포스팅 하면 300개는 금방일 것 같다. 

 

 

1. 필요한 모듈 설치하기

세션을 이용하기 위해서는 설치해줄 모듈이 2개 정도 있다.

 

npm install express-session

express에서 제공해주는 express-session을 꼭 설치해야한다.

 

2. session 사용을 위한 미들웨어 생성하기

app.use(cors({
  origin: true,
  credentials: true
}))
app.use(cookieParser());
app.use(session({
  secret: "anything",
  resave: false,
  saveUninitialized: true
}))

세션을 이용하기 위한 미들웨어를 생성한다.

app.ts 위쪽에 삽입해주면 된다.

 

3. session 만들기

app.post("/signin",async (req, res) => {
  try {
      const { email, password } = req.body;
      
      // 유저 확인
      const findEmail = await User.findOne({ email });
      if(!findEmail) return res.status(400);
      
      // 암호한 된 비밀번호 조회
      const bcryptResult = bcrypt.compareSync(password, findEmail?.password as string)
      
      // 비밀번호가 틀리다면
      if(!bcryptResult) {
        return res.status(400);
      } else {
      	// 로그인 성공 시 세션 생성
          req.session.user = {
              id: findEmail.id,
              email: findEmail.email,
              isLogined: true
          }
          res.status(200).json({ result: 100 })
      }
  } catch (error) {
    console.log(error);
    return res.status(400);
  }
})

로그인에 성공한다면 req.session.user를 이용해서 세션을 생성해주면 된다.

 

저번과 같은 오류가 발생했다.

Property 'user' does not exist on type 'Session & Partial<SessionData>'.ts(2339) 해결 방법은 아래 포스팅에도 정리했지만 더 좋은 방법을 찾았다!

https://bcoding-lab.tistory.com/291

[TypeScript] Property 'user' does not exist on type 'Session & Partial<SessionData>'. ts(2339) 해결

 

 

우선 왜 이런 상황이 발생하는지 알아보도록 하자.

초반에 express-session을 사용할려고 하면 typescript에서 사용할 수 있게 @types/express-session을 설치하라는 안내 문구가 나온다.

 

interface SessionData {
  [key: string]: any;
  cookie: SessionCookieData;
}

원래 이렇게 sessionData가 구성되어져 있어 어떤 값을 넣어도 잘 된다.

하지만 @types/express-session 1.18 이후 버전부터는 아래과 같이 바뀌었다.

 

interface SessionData {
  cookie: Cookie;
}

이렇기 때문에 처음에는 위 포스팅처럼 해당 모듈의 코드를 찾아서 주입시켰다.

하지만 그럴 필요 없이 아래 코드를 삽입해주면 된다.

 

declare module "express-session" {
  interface SessionData {
    user: {
      id: string;
      email: string | undefined;
      isLogined: boolean;
    };
  }
}

이 코드는 어디에 넣어도 상관 없으니 원하는 곳에 넣어주면 된다.

 

세션을 조회하니 잘 저장된 것을 확인할 수 있다!