Node.js - 쿠키와 세션 관리

 

안녕하세요 :)

 

이번 포스팅에서 다루어볼 내용은 쿠키와 세션에 대한 관리입니다.

 

사용자가 로그인 상태인지 아닌지 확인을 위해서는 쿠키 또는 세션을 사용합니다.

쿠키는 클라이언트 웹브라우져에 저장되는 정보이며, 세션은 웹서버에 저장되는 정보입니다.

 

 

쿠키처리)

쿠키는 클라이언트 웹 브라우저에 저장되는 정보로서 일정 기간 동안 저장하고 싶을 때 사용합니다. 익스프레스에선 cookie-parser 미들웨어를 사용하면 쿠키를 설정하거나 확인할수 있습니다. 아래의 예제를 통해 다루어 보겠습니다.

 

먼저 모듈을 설치해보겠습니다.

 

 

쿠키정보는 cookies 객체에 들어있습니다. 사용자가 응답문서를 조회할때 쿠키 정보를 볼수 있도록 /process/showCookie 패스를 처리하는 함수에서 이 쿠키 객체를 응답으로 보냅니다.

 

/process/setUserCookie 패스를 처리하는 함수에서는 응답객체의 cookie()메소드로 user 쿠키를 추가 합니다. 그러면 쿠키가 클라이언트 웹브라우저에 설정되는데, 마지막 코드 부분에서 redirect 메소드를 통해 /process/showCookie 패스를 다시 요청해보겠습니다. 결과적으로 클라이언트의 웹 브라우저에 쿠키정보가 그대로 다시 표시되겠죠

 

다음은 아래와 같은 코드 작성를 작성하고 웹브라우져를 통해 쿠키를 확인해보겠습니다.

 

 

user 라는 이름으로 쿠키를 추가한 코드이며 브라우져를 열어 개발자 도구 옵션을 통해 쿠키를 확인해보면 다음과 같이 user라는 이름으로 쿠키 내역이 추가된것을 확인할수 있습니다.

 

 

 

 

세션처리)

이번에는 세션을 다루어 보겠습니다. 세션도 상태정보를 저장하는 역할을 하지만 쿠키와는 달리 서버쪽에 저장이 됩니다. 세션을 사용하는 대표적인 예로 로그인했을때 저장되는 세션이 있습니다.

 

사용자가 로그인하면 세션이 만들어지고 로그아웃하면 세션이 삭제되는 기능을 만든다면 사용자가 로그인 하기전에는 접근이 제한된 페이지를 보지 못하도록 설정할수 있습니다.

예를들어) 관리자 계정을 통해 로그인 해야만 관리자 페이지로 들어갈수 있는것또한 세션의 예입니다.

 

세션을 통해 다루어볼 예제는 다음과 같습니다.

 

로그인 -> 로그인성공페이지-> 상품 관리 페이지 -> 로그아웃 

 

각각의 페이지를 만들어 유기적으로 묶어볼것이고 그때 세션을 확인해보겠습니다.

 

먼저 모듈을 설치해줍니다. 세션 지원 모듈명은 express-session 입니다.

 

그럼 지금부터 코딩을 시작해 보겠습니다. 세션을 사용할 때는 쿠키도 같이 사용하므로 cookie-parser 모듈도 함께 불러들입니다.

 

 

다음은 아래와 같이, 만약 세션 객체가 있으면 /public/product.html 파일을 응답으로 보내어 상품 정보를 볼수 있게 하고 user 섹션이 없다면 로그인페이지를 보여주는 미들웨어를 작성합니다.

 

 

product.html 파일은 로그인 이후 상품 정보를 보여주기 위한 웹문서이며, 지금의 각 웹문서간의 유기적인 이동을 처리하는데에 중점을 둔 예제이기 떄문에 간단하게 작성해주겠습니다. 아래와 같습니다. 로그 아웃시에는 a태그를 이용했으며 하이퍼링크로 로그아웃패스를 할당해주었습니다.

 

 

로그인 패스로 처리해줄 미들웨어 작성

 

 

로그아웃 패스로 처리해줄 미들웨어 작성

 

 

위 과정 까지 다 해주었다면 완성입니다.

 

결과는 아래와 같습니다.

 

 

 

<로그인 페이지>

 

 

<로그인 성공페이지>

 

 

<상품 페이지>