Node.js 系列學習日誌#22 - 使用 express, mysql, ejs 實作登入/登出功能

上篇介紹了註冊,相對的就一定要來介紹登入的功能。在資料庫上定義了 username, userpass 的欄位,登入的時候就在頁面上擺上兩個輸入框,以及登入的按鈕。

在上一篇已經有建立好 models 的部分,在登入的操作也需要透過 models 向資料庫做存取,請打開 /models/user.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//檢查是否為會員
User.getUserNumByName = function getUserNumByName(username, callback) {
//使用username 來檢查是否有資料
var cmd = “select COUNT(1) AS num from user info where username = ?";
connection.query(cmd, [username], function (err, result) {
if (err) {
return;
}
connection.release();
//查詢結果使用 callback 呼叫,並將 err, result 參數帶入
callback(err,result);
});
};
//透過帳號取得使用者資料
User.getUserByUserName = function getUserNumByName(username, callback) {
var cmd = “select * from userinfo where username = ?";
connection.query(cmd, [username], function (err, result) {
if (err) {
return;
}
connection.release();
callback(err,result);
});
};

然後請在 routes/ 資料夾 (如果沒有請自行建立)新增 login.js 檔案,在這檔案要特別注意的是,當登入表單送出的時候,如果是會員的話,那麼在登入進到主頁時,將使用者帳號寫到 session 上面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var express = require('express'),
User = require('../models/user.js'),
router = express.Router(),
crypto = require('crypto'),
title = '登入';

router.get('/', function(req, res) {
res.render('login', {title:title});
});

router.post('/', function(req, res) {
var userName = req.body['txtUserName'],
userPwd = req.body['txtUserPwd'],
md5 = crypto.createHash('md5');

User.getUserByUserName(userName, function (err, results) {
if(results == '') {
res.locals.error = '使用者不存在';
res.render('login',{title:title});
return;
}

userPwd = md5.update(userPwd).digest('hex');
if(results[0].UserName != userName || results[0].UserPass != userPwd) {
res.locals.error = '使用者帳號或密碼錯誤';
res.render('login',{title:title});
return;
} else {
res.locals.username = userName;
//設定session
req.session.username = res.locals.username;
console.log(req.session.username);
res.redirect('/');
return;
}
});
});

module.exports = router;

一切基本動作準備好之後,接著就打開 app.js 新增 login 的 router 路由,而這個路由將真的表單的請求作處理,在以下的兩行程式所代表的是指定載入路由的寫法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var login = require('./routes/login’);
app.use('/login', login);

view 檢視 請在 /views/ 建立 index.ejs

<!DOCTYPE html>
<html>
<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><%= title %></title>
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />
</head>
<body>
<div class="container">
<% if (locals.username) { %>
<h1>您好, <%= username %></h1>
<a href="/logout">登出</a>
<% } %>
</div>
</body>
</html>

已知註冊的帳號密碼是 test / 123456

登出

有了登入之後,也別忘了登出,登出的寫法也相當容易,由於本章節是將註冊的帳號用 session 保存,而登出只需要將 session 銷毀即可,銷毀之後,再退到登入頁面。程式如下:

1
2
3
4
5
6
7
8
9
var express = require('express'),
router = express.Router();

router.get('/', function(req, res) {
req.session.destroy();
res.redirect('/login');
});

module.exports = router;