쿠키
https://bitkunst.tistory.com/entry/Nodejs-express-5-%EC%BF%A0%ED%82%A4cookie
Node.js - express (5) 쿠키(cookie)
이번 포스팅에서는 쿠키(cookie)의 개념에 대해 알아보고자 한다. < 목차 > 쿠키란? 쿠키 구현 방식 쿠키 속성 < 쿠키(cookie)란?? > 쿠키(cookie)란 HTTP의 일종으로서 인터넷 사용자가 어떠한 웹사이트를
bitkunst.tistory.com
오늘 로그인 페이지 만든 과정
아래의 순서대로 전개하겠다.
1. 메인 페이지에서 로그인버튼을 클릭하면, 아이디, 패스워드를 입력하는 로그인 페이지로 이동
2. 아이디, 패스워드를 입력하고 로그인 버튼을 눌러 제출을 하면,
1) "아이디" 님 환영합니다. 라고 뜨며, 로그아웃 버튼과 내 정보로 이동하는 링크 생성
2) 만약, 저장되어 있지 않은 아이디-비밀번호 일경우 다시 로그인 페이지로 이동. (로그인 안됨)
3. 로그아웃을 누르면 쿠키 삭제
4. 로그인 상태에서 내정보로 이동.
1. 메인 페이지에서 로그인버튼을 클릭하면, 로그인 페이지로 이동시키기
1-1) 기본세팅(express, nunjucks 설치 및 불러오기, 전 게시글 참고) 을 해준다.
기본세팅
const express = require('express')
const nunjucks = require('nunjucks')
const app =express()
app.set('view engine', 'html')
nunjucks.configure('views', {
express:app
})
app.listen(3000,()=>{
console.log('서버 시작')
})늘 여기까지가 기본이다. html 파일들을 담은 폴더 이름을 views로 해주겠다.
1-2) 로그인 페이지 html 작성하기
<body>
<h1>
<a href="/">Logo</a>
</h1>
<ul>
<li>
<a href="/login">Login</a>
</li>
</ul>
</body>Login 버튼을 클릭하면, localhost:3000/login 도메인으로 이동시킨다.
app.get('/login', (req,res)=>{
res.render('login')
}) // login.html 파일을 랜더
2. 아이디, 패스워드를 입력하고 로그인 버튼을 눌러 데이터 보내주기
정보를 입력하는 html을 작성하겠다.
<body>
<h1>
<a href="/">Logo</a>
</h1>
<form method="post" action="/login">
아이디: <input type="text" name="userid">
패스워드 : <input type="password" name="userpw">
<input type="submit" value="로그인">
</form>
</body>
2-1-1) "아이디" 님 환영합니다. 라고 뜨며, 로그아웃 버튼과 내 정보로 이동하는 링크 생성하기
먼저 가입한 정보가 있어야 그 사람이 사용자인지, 외부인(가입 안한)인지 확인이 가능하다. 따라서 특정 아이디와 비밀번호를 저장해주어야한다.
사전에 먼저 외부 파일로 아이디-비밀번호가 적힌 데이터를 require해서 가져오면 좋지만, 귀찮으므로 자바스크립트 내부에 만들어주겠다.
let user = {
userid:'podo',
userpw:'1234',
username:'청포도좋아요'
}user라는 이름의 객체를 저장하였다. (이미 가입 완료된 회원의 저장된 정보)
2-1-2) 아이디와 패스워드란에 위와 같은 정보를 넣어서 로그인을 누르면,
로그인 완료 메세지와 함께 로그아웃 버튼, 내정보이동하는 링크를 띄우는 페이지로 이동하는 코드를 작성하겠다.
app.post('/login', (req,res)=>{
const userid = req.body.userid
const userpw = req.body.userpw
if(user.userid === userid && user.userpw === userpw){
//로그인 성공시
console.log('로그인 성공')
res.setHeader('Set-Cookie', `login=${userid}`)
res.redirect('/')
}
})res.setHeader는 로그인정보를 저장해주는 것인데, Set-Cookie라는 key값에 userid라는 value값이 쿠키로 저장되는 것이다. 즉, 필자에게는 podo라는 값이 value값으로 저장됨.
그 후 -> redirect로 메인페이지로 다시 이동한다.
그러나, 이거는 회원정보가 일치할 때의 이야기이고, 가입하지 않은 사용자가 멋대로 아이디, 비밀번호를 입력했을 땐
접근하지 못하게 해야한다.
2-2-1) 만약, 저장되어 있지 않은 아이디-비밀번호 일경우 다시 로그인 페이지로 이동하도록 한다. (로그인 안됨)
위의 코드를 조금 수정해주겠다.
app.use(express.urlencoded({extended:true})) //필수
app.post('/login', (req,res)=>{
const userid = req.body.userid
const userpw = req.body.userpw
console.log(userid, userpw)
if(user.userid === userid && user.userpw === userpw){
//로그인 성공시
console.log('로그인 성공')
res.setHeader('Set-Cookie', `login=${userid}`)
res.redirect('/')
}else{
//실패시
console.log('로그인 실패')
res.send("<script>alert('아이디나 비밀번호가 잘못되었습니다.');location.href='/login';</script>");
}
})
res.send("<script>alert('아이디나 비밀번호가 잘못되었습니다.');location.href='/login';</script>");
정보가 일치하지 않을경우, 아이디나 비밀번호가 잘못되었습니다. 라는 알림창을 띄운 후, localhost:3000/login(로그인페이지)로 이동한다는 의미이다.
2-2-2) 그런데 여기서 의문점이 하나있다. 로그인 성공하는 경우에도 redirect로 '/' 로 즉, localhost:3000으로 이동해주었는데, 아까 우리가 작성한 코드는 달랑
<h1>
<a href="/">Logo</a>
</h1>
<ul>
<li>
<a href="/login">Login</a>
</li>
</ul>이거이다. 같은 도메인에서 로그인이 되었을 때, 로그인이 안되었을 때(로그아웃 상태일때)
랜더가 다르게 되도록(다르게 보이도록) html을 작성해주어야한다.
따라서, 로그인 여부를 확인할 수 있는 변수를 생성해주어 상황별로 html이 다르게 나타날 수 있게 코드를 작성해야한다. 그러기 위해 먼저, 자바스크립트 코드를 먼저 작성해주겠다.
app.get('/', (req,res)=>{
let isLogin = false
if (req.headers.cookie === undefined){
res.render('index', {
isLogin:isLogin
})
}else{
let cookie = req.headers.cookie.split('=') // npm install cookie-parser << 얘는 라이브러리, 편한 버전
let userid = cookie[1] //podo
if (userid === 'podo'){
isLogin = true
}
res.render('index', {
userid:userid,
isLogin:isLogin
})
}
})req.headers.cookie 는 undefined라면 (아이디 틀리면)--> 데이터베이스에 존재하는 아이디와 입력한 아이디가 일치하지 않아, 캐시 생성이 되지 않았기 때문에 undefined 인것임.
그럴경우, index.html (localhost:3000) 로 이동하며, isLogin을 isLogin이라는 객체에 담겠다.(nunjucks 사용위해서임. html에서 이 데이터를 사용하기 위해서 사용)
undefined가 아닐경우(아이디가 같다면, 즉 저장된 회원정보라면)
cookie에서 온전히 아이디 값만 추출해준 후, isLogin 값을 true로 변경한다. 그리고 그 후엔 마찬가지로, index.html페이지를 랜더시키며 userid값과 isLogin값을 전달한다.
HTML은
아래처럼 수정해주도록 하겠다.
<body>
<h1>
<a href="/">Logo</a>
</h1>
<ul>
{% if isLogin %}
<!-- 로그인 됐을때 코드실행영역 -->
<li>{{userid}}님 환영합니다.</li>
<li><a href="/logout">Logout</a></li>
<li><a href="profile">Profile</a></li>
{% else %}
<!-- 로그인 안되었을 때 코드실행영역 -->
<li><a href="/login">Login</a></li>
{% endif %}
</ul>
</body>로그인 되었을 때(isLogin 뒤에 별도로 true값을 안써도 됨, 디폴트는 true이기때문임 )는, 아까 자바스크립트에서 넘겨받은 userid 변수를 사용하여 코드를 작성할 수 있다.
" podo 님 환영합니다. "
"Logout"
"Profile"
만약, 로그인에 실패했을 경우, 처음과 코딩했던 방식과 마찬가지로 Login 페이지만 반복적으로 랜더한다.
endif로 if문을 반드시 끝내주어야한다.(넌적스 문법임)
한번 연달아서 출력 해보자!
로그인 성공 시
로그인 실패 시
알림 표시후,
다시 로그인 페이지로 이동한다.
3. 로그아웃을 누르면 쿠키 삭제 되도록 하기.
app.get('/logout', (req,res)=>{
res.setHeader('Set-Cookie','login=podo; Max-Age=0;')
res.redirect('/')
})Max-Age=0으로 쿠키의 세션을 만료시켜버린다. 그러면 자연히 쿠키가 삭제됨.
그 후, 다시 메인으로 이동한다.
4. 로그인 상태에서 내정보로 이동하기
(프로필을 클릭해 내 정보를 확인하기.)
자바스크립트 코드
app.get('/profile', (req,res)=>{
//1단계 : 먼저 요청에 들어간 쿠키를 꺼내와야한다.
//쿠키 여부 있는지
if (req.headers.cookie == undefined){
res.redirect('/')
} else{
let cookie = req.headers.cookie.split('=')
let userid = cookie[1]
if ( user.userid == userid){
res.render('profile',{
userid:user.userid,
username : user.username
})
}
else{
res.render('/profile')
}
}
})아까 전의 코드와 거의 같다.
쿠키에서 userid를 추출한 후, 저장된 정보와 입력 userid가 같다면, profile.html을 랜더링해주고, userid와 username을 보내준다.
HTML코드는 아래처럼 작성한다. 파일명: profile.html
<body>
<h1>
<a href="/">Logo</a>
</h1>
<ul>
<li>userid : {{userid}}</li>
<li>username : {{username}}</li>
</ul>
</body>출력 결과는 아래와 같다.
'백엔드 > Node.js' 카테고리의 다른 글
| [nodejs]로그인 시 JWT 생성하기(인증) (1) | 2022.03.03 |
|---|---|
| [nodejs]쿠키, 세션, 미들웨어, 라우팅 (1) | 2022.02.08 |
| [nodejs] 게시판 만들기 CRUD(글쓰기, 읽기, 수정하기, 삭제하기) (0) | 2022.02.03 |
| [nodejs] promise, then, await 구동 순서, 사용 이유 완벽 이해하기 (0) | 2022.01.28 |
| [nodejs] 템플릿 엔진 nunjucks 설치, 세팅, 사용하기 (0) | 2022.01.28 |