Node.js를 이용한 로그인 기능 구현 (쿠키)

이번 글에서는 쿠키를 이용하여 로그인 기능을 구현해보겠다.

 

쿠키와 세션에 대한 개념은 추후 따로 정리해서 글을 쓸 예정이다.

 

[그림 3] server 자바스크립트 파일

user 객체는 이미 존재하는 회원의 ID, PW, 닉네임으로 설정해두었다.

 

첫 번째 if문은 localhost:3000에 접속했을 때 쿠키 존재 여부에 따라 나누었다. 만약 쿠키가 존재하지 않으면 index.html을 렌더하고, 쿠키가 존재한다면 userid가 leejy2306과 일치하는지 여부를 판단하여 일치하면 isLogin의 값을 true로 할당한다.

 

로그인 페이지에서 로그인을 할 때 ID와 PW를 모두 제대로 입력했으면 콘솔 로그로 Login Success가 나타나고 Set-Cookie로 login=userid라는 쿠키값을 할당하였다. ID와 PW 둘 중 하나라도 틀리면, 콘솔 로그로 Login Failure를 띄우고 다시 로그인을 시도하게끔 했다.

 

로그인이 된 상태에서 로그아웃을 할 때에는 Set-Cookie의 Max-age를 0으로 처리해서 쿠키값이 0초 동안 지속되게 했다. 즉, 쿠키값을 날려버리는 것과 같다.

 

프로필 페이지에서는 ID와 닉네임이 보여지도록 했다. 보안상 PW는 나타나면 안 된다.

 

[그림 4] index HTML 파일

localhost:3000으로 들어가면 처음으로 index.html 파일이 랜더링된다. if문을 통해 isLogin의 값이 true일 때와 false일 때 각각 다른 화면이 나타나도록 했다.

 

[그림 5] 로그인 메인 화면

isLogin값이 false일 때 보여지는 화면이다. 즉, 쿠키값 자체가 아예 없거나 쿠키값은 있는데 ID가 leejy2306과 일치하지 않는 경우 isLogin이 false이므로 위와 같은 화면이 나타난다.

 

[그림 6] Login을 클릭했을 때 나타나는 HTML

index.html의 Login을 클릭하면 로그인 페이지로 이동한다. input 태그를 넣어서 ID와 PW를 입력하고 Login 버튼으로 제출할 수 있게 form 태그로 감싸주었다.

 

[그림 7] Login을 클릭했을 때 나타나는 화면

ID와 PW를 입력하고 Login 버튼을 클릭하면 post 방식으로 입력된 값이 제출된다.

 

[그림 8] Login 성공 후 나타나는 화면

로그인이 성공하면, 쿠키값이 생기고 login=leejy2306을 만족하므로 이때 isLogin 값이 비로소 true가 된다. 따라서 localhost:3000으로 다시 접속하면 위와 같은 화면이 나타난다.

 

[그림 9] profile HTML 파일

프로필 페이지로 넘어가면 ID와 닉네임이 나타나도록 HTML 파일을 만들어주었다.

 

[그림 10] profile 화면

ID와 닉네임이 잘 나타나는 것을 확인하였다.