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;