이어서 지난 번에 만들었던 로그인 기능까지 갖춘 웹 페이지 집합에
로그 아웃 기능과 프로필 페이지를 추가하는 것을 해보도록 하자.
메인 페이지에 이미 로그아웃과 프로필로 가는 anchor element를 만들어두었으니,
이제 여기에 연결시켜줄 웹 페이지와 uri를 만들어주면 된다.
1. 로그아웃 기능 구현
로그 아웃을 한다는 것은 우리가 만들어준 쿠키를 제거해준다는 것을 의미한다.
여기서는 로그아웃 시, 쿠키의 만료 시간을 0으로 만드는 방식을 사용할 것이다.
메인 페이지에서 로그 아웃 버튼을 누르면
> 지정된 uri로 이동하고
> 거기서 응답을 받고 (여기서 쿠키를 제거)
> 메인페이지로 리다이렉트
되는 순으로 진행해보자.
메인 페이지 html에서 logout에 걸린 anchor를 다음과 같이 수정하자.
/* main.html */
<li><a href='/logout'>logout</a></li>
해당 uri에 대한 코드를 라우터에서 작성해준다.
/* server.js */
app.get('/logout', (req, res) => {
res.setHeader('Set-Cookie', 'login=lifereset; Max-Age=0')
res.redirect('/')
})logout uri로 가면 헤더를 조작해 이름이 login, 값이 lifereset인 쿠키의 존재 시간을 0으로 만들어
사라지게 만든 후, 메인 페이지로 리다이렉트 된다.
2. 프로필 기능 구현
로그인한 상태의 메인 페이지에서 프로필 버튼을 누르면 간단한 프로필을 볼 수 있도록 코드를 짜보자.
우선 메인 페이지에서 프로필 페이지에 연결되도록 anchor element를 바꾼다.
/* main.js */
<li><a href='/profile'>profile</a></li>
대응하는 html은 다음과 같이 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
<a href="/">logo</a>
</h1>
<ul>
<li>userid : {{userid}} </li>
<li>username : {{username}} </li>
</ul>
</body>
</html>
마지막으로 js에서 라우터에 /profile uri에 대한 코드를 추가한다.
/* server.js */
app.get('/profile', (req, res) => {
let cookie = req.headers.cookie.split('=')
let userid = cookie[1]
if (user.userid === userid) {
res.render('profile.html', {
userid:user.userid,
username:user.username
})
}
}
'Nodejs > Server' 카테고리의 다른 글
| Session #2 - 미들웨어 (0) | 2022.02.13 |
|---|---|
| Session #1 (0) | 2022.02.13 |
| Server의 이해 - Cookie #1 (0) | 2022.02.07 |
| JavaScript의 활용 - 게시판 서버 만들기 #2 (0) | 2022.02.06 |
| Javascript의 활용 - 게시판 서버 만들기 #1 (0) | 2022.02.06 |