TODO 프로젝트 – 8. 로그인 처리
DB 회원정보 테이블에 있는 회원정보를 가져와 로그인 처리를 진행해보겠습니다.
기본적인 로직은 리스트 표시하기와 동일합니다.
폼입력 -> API 호출 -> API에서 DB쿼리 결과값 확인 -> 결과 표시
다만 리스트 표시와는 다르게 완료시에 세션과 같은 로그인 완료처리가 필요합니다.
추가로 리스트에도 내 할일만 표시되게 기능 수정이 필요합니다.
1.프론트 처리 (frontend/src/commponents/page/login.vue)
<template>
<div class="login">
<h2 class="comm__title">LOGIN</h2>
<div class="ipt__box">
<input type="text" class="ipt" placeholder="ID" v-model="user.id">
</div>
<div class="ipt__box">
<input type="password" class="ipt" placeholder="Password" v-model="user.password" @keyup.enter="login()">
</div>
<div class="ipt__btn">
<a href="#" class="btn btn--confirm btn--large" v-on:click="login()">LOGIN</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user : {
id : '',
password : ''
}
}
},
methods : {
login : function () {
if (this.user.id == '') {alert('아이디를 입력해주세요.');return;}
if (this.user.password == '') {alert('비밀번호를 입력해주세요.');return;}
this.$http.post('/api/login', {user:this.user}).then((response) => {
if (response.data.success == true) {
alert(response.data.message);
this.$router.push('/list'); //로그인 성공시 list 페이지로 이동
} else {
alert(response.data.message);
}
});
}
},
created () {
}
}
</script>
로그인 버튼 클릭시 login 함수를 실행합니다.
API 쿼리 결과를 바탕으로 경고창을 출력해줍니다.
추가로 엔터키 입력시 login 함수처리와 로그인 뒤 이동처리도 추가합니다.
2.API 처리 (backend/app.js)
세션 관련 NPM 패키지 추가
npm install express-session --save
npm install express-mysql-session --save
express-session, express-mysql-session NPM 패키지를 설치합니다.
모듈 호출 수정
var express = require('express');
var mysql = require('mysql');
var bodyParser = require('body-parser');
var session = require('express-session');
var MySQLStore = require('express-mysql-session')(session);
var jsonParser = bodyParser.json();
var cookieParser = require('cookie-parser');
var path = require('path');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
var connection = mysql.createConnection({
host : '127.0.0.1',
user : 'admin',
password : '****',
database: 'todos'
});
connection.connect();
var options = {
host: '127.0.0.1',
port: '3306',
user: 'admin',
password: '****',
database: 'todos'
}
var sessionStore = new MySQLStore(options);
app.use(session({
secret: '!@#$%^&*', // 암호화
resave: false,
saveUninitialized: true,
store: sessionStore
}));
express-session과 express-mysql-session를 추가합니다.
DB에 연결하고 세션 옵션을 선언합니다.
로그인 API 수정
app.post('/api/login', function (req,res) {
var params = [req.body.user.id,req.body.user.password];
connection.query(
"SELECT * FROM `todos_member` WHERE `member_id`= ? and `member_pw` = ?", params,
function (error, results) {
if (error) console.log(error);
if (results.length === 1) {
req.session.userNo = results[0].member_no;
req.session.save();
res.json({
success : true,
message : req.body.user.id+'님 로그인 되었습니다.'
});
} else {
res.json({
success : false,
message : '로그인에 실패했습니다.'
});
}
}
);
});
로그인 API입니다.
아이디와 비밀번호를 확인하여 결과가 있을시 세션을 생성하고 로그인 메시지를 띄웁니다.