로그인
app.js
const cookieParser = require('cookie-parser');
const expressSession = require('express-session');
...
app.use(cookieParser());
app.use(expressSession({
secret: 'my key',
resave: true,
saveUninitialized: true
}));우선 app.js에 cookie-parser와 express-session 모듈을 설치하고 적용해준다. cookie-parser는 Node js가 브라우저의 쿠키데이터를 관리할 수 있게 해준다. express-session은 session을 관리해주는 미들웨어다.
Routes
routes.post('/loginAction', joinController.getLoginAction);우선 Routes 파일에는 사용자가 로그인을 시도할 때 joinController.getLoginAction 컨트롤러로 이동할 수 있게 해주었다.
Controller/login.js
exports.getLoginAction = (req, res, next) => {
let userid = req.body.userid;
let userpassword = req.body.userpassword;
Login.loginAction(userid, userpassword, (member) => {
if (!member) {
console.log("로그인 에러 : " + err);
} else {
console.log("로그인 액션 성공");
req.session.user = member;
res.render("index", {
pageTitle: "Welcome E-Book2",
member: req.session.user,
});
}
});
};컨트롤러에서는 사용자가 로그인을 했을 때 아이디와 비밀번호를 받아서 모델로 보낸다. 그리고 값이 오면 session에 유저 객체를 넣고 그 값을 보내준다.
Model/login.js
let member = (cb) => {
var user;
if (cb) {
user = { ...cb };
} else {
user = {};
};
return user;
};
module.exports = class Login {
constructor(userid, userpassword) {
this.userid = userid;
this.userpassword = userpassword;
}
static loginAction(id, password, cb) {
if (id && password) {
var loginSql = "SELECT * FROM member WHERE userid = ?";
var param = id;
connection.query(loginSql, param, (err, row, fields) => {
if (err) {
console.log("쿼리 1 에러 : " + err);
} else {
if (password != row[0].userpassword) {
console.log("비밀번호를 정확하게 입력해주세요.");
} else {
console.log("로그인 성공!!");
cb(member({ ...row[0] }));
}
}
});
connection.end();
} else {
console.log("아이디와 비밀번호를 입력해주세요.");
}
}
};모델에서는 아이디와 비밀번호를 다루는 작업을 한다(데이터를 다룬다). 우선 member 함수는 로그인에 성공했을 때 유저의 정보를 담는 함수다.
그리고 static loginAction에선 컨트롤러에서 받은 아이디와 비밀번호를 이용해 DB에 있는 유저 정보와 받는지 확인한다. 정확하다면 유저 정보를 Callback함수로 다시 컨트롤러에 반환해준다.
View/head-nav
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title><%= pageTitle %></title>
<!-- Core theme CSS (includes Bootstrap)-->
<link href="/css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="/">E-Book</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="/">Home</a></li>
<% if(!member) { %>
<li class="nav-item"><a class="nav-link" href="/login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="/join">Join</a></li>
<% } else { %>
<li class="nav-item"><a class="nav-link" href="/mypage"><%= member.username %>님 환영합니다.</a></li>
<li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
<% } %>
<li class="nav-item"><a class="nav-link" href="#!">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Services</a></li>
</ul>
</div>
</div>
</nav>마지막으로 헤드와 네비게이션에 해당하는 부분에 ejs구문을 활용하여 로그인 됐을 때와 되지 않았을 때를 구분해준다.
로그인 전
로그인 후
로그아웃
로그아웃은 매우 간단하다.
Routes
routes.get('/logout', joinController.logout);routes는 로그아웃 요청이 오면 컨트롤러의 logout으로 보낸다.
Controller
exports.logout = (req, res, next) => {
if(req.session.user){
req.session.destroy((err) => {
if(err){
console.log('로그아웃 에러 : ' + err);
} else {
console.log('로그아웃 성공');
res.redirect('/');
}
});
};
}그리고 나서 Controller에서는 session.destroy로 세션을 제거해주면 된다.
정리하기
이번에 로그인 부분으로 꽤나 오랜 시간이 걸렸지만 스스로 마무리를 했다. 언어의 부족했던 부분을 이해하면서 넘어갔기 때문에 매우 뿌듯한 부분이지 않았나 싶다. 그래도 아직도 부족한 부분이 많고 오류라면 얼마든지 날 수 있다. 이러한 부분들은 기능이나 원하는 작동들이 이루어지고 난 후에 리펙토링을 할 예정이다. 우선순위를 잘 지켜가며 해보자
음악을 좋아하는 사람이 음악을 만들 듯, 개발을 좋아하게 될 사람이 쓰는 개발이야기