iT邦幫忙

DAY 28
3

Node.js 系列學習日誌系列 第 28

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

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

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

//檢查是否為會員
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 上面

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 路由,而這個路由將真的表單的請求作處理,在以下的兩行程式所代表的是指定載入路由的寫法。

var login = require('./routes/login’);
app.use('/login', login);

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

    <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" />
  
  
     <div class="container">
        <% if (locals.username) { %>
          <h1>您好, <%= username %></h1>  
          <a href="/logout">登出</a>
        <% } %>
      </div>
  

已知註冊的帳號密碼是 test / 123456 ,那麼就在表單輸入帳密,結果如下:

登出

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

var express = require('express'),
     router = express.Router();

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

module.exports = router;

參考資料:
http://stackoverflow.com/questions/22994589/nodejs-express-routes-and-mysql

http://stackoverflow.com/questions/7990890/how-to-implement-login-auth-in-node-js


上一篇
Node.js 系列學習日誌 #27 - 使用 express, mysql, ejs 實作註冊功能
下一篇
Node.js 系列學習日誌 #29 - 部署上線至 Heroku 雲端平台環境
系列文
Node.js 系列學習日誌30

尚未有邦友留言

立即登入留言