nodejs框架express實現登錄

目錄:

1. 訪問視圖
2. Post請求
3. Post請求 - body(1)
4. Post請求 - body(2)
5. Post登陸1
6. Post登陸2
7. 頁面訪問控制1
8. 頁面訪問控制2

訪問視圖

前面我們已經添加了視圖模板並學習了訪問視圖的方法，那我們就先回顧一下。

1.參考以下代碼，地址欄訪問這幾個請求路徑查看是否可以成功。

app.get('/', function(req, res) {
　　res.render('index');
});
 
app.get('/login',function(req,res){
　　res.render('login');
});
 
app.get('/home',function(req,res){
　　res.render('home');
});

 

當瀏覽器看到了相應的視圖頁面就說明我們的代碼是沒有問題的，繼續加油吧！

 

用戶登陸

前面我們學習了express的get請求方法，今天我們就學習它的post請求方法。

1. post方法 —— 根據請求路徑來處理客戶端發出的Post請求。

2. 格式：app.post(path,function(req, res));

3. 和get方法一樣，path為請求的路徑，第二個參數為處理請求的回調函數，req和res分別代表請求信息和響應信息。

4. 例如處理login的post請求，如下示例

app.post('/login',function(req,res){

});

 

了解了post方法，下面我們就開始使用post來實現簡單的用戶登陸功能。

 

body基本用法

實現登陸之前我們先來了解一個屬性 —— body。

body屬性解析客戶端的post請求參數，通過它可獲取請求路徑的參數值。

格式：req.body.參數名；

下面我們就來測試body屬性的功能，做一些准備工作。

1. 修改login.html，為登陸按鈕增加登陸事件。

<input type="button" onclick="login();" value="登 陸">

 

function login(){
    var username = $('#username').val();
    var data = { "username": username };
    $.ajax({
        url:'/login',
        type:'POST',
        data:data
    });
}        

 

2. 要想使用body屬性解析post請求參數值，我們需要先安裝和引用express的兩個中間件body-parser和multer，具體方法如下：。

2.1 安裝

npm install body-parser
npm install multer

2.2 引用和調用

var bodyParser = require('body-parser');
var multer = require('multer');
......
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());

 

中間件body-parser和multer用於處理和解析post請求的數據。

body基本用法

到這里我們就可以測試post請求的body屬性的簡單用法了。

1. 修改好之后的完整的文件app.js如下所示：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer');
 
app.set('views', __dirname);
app.set( 'view engine', 'html' );
app.engine( '.html', require( 'ejs' ).__express );
 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());
 
app.get('/',function(req,res){
　　res.render('login');
});
app.post("/login", function(req, res) {
　　console.log("用戶名稱為：" + req.body.username);
});
 
app.listen(80);

准備登陸

接下來我們就開始實現登陸功能，讓我們要先做一些准備工作，為相關按鈕添加點擊事件、鏈接。

1. 修改index.html，增加登陸鏈接。

<p><a href="login">登 錄</a></p>

2.強化login頁面的login方法，實現一個簡單的post請求：

function login(){
　　var username = $('#username').val();
　　var password = $('#password').val();
　　var data = { "username": username, "password":password};
　　$.ajax({
　　　　url:'login',
　　　　type:'POST',
　　　　data:data,
　　　　success:function(data,status){
　　　　　　if(status == 'success'){
　　　　　　　　location.href='home';
　　　　　　}
　　　　},　　
　　　　error:function(data,status,e){
　　　　　　if(status == "error"){
　　　　　　　　location.href='login';
　　　　　　}
　　　　}
　　});
}

 

網頁模板准備已經就緒，下面我們開始修改啟動文件app.js的內容。

 

准備登陸

下面我們就開始修改app啟動文件的內容。

1. 修改post方法，這里假設數據庫中用戶名的名字為admin、密碼為admin。

app.post('/login',function(req,res){
　　var user={
　　　　username:'admin',
　　　　password:'admin'
　　}
　　if(req.body.username==user.username&&req.body.password==user.password)
　　{
　　　　res.send(200);
　　}else{
　　　　res.send( 404 );
　　}
});

 

2. 一個完整的啟動文件app.js如下所示：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer');
 
app.set('views', __dirname);
app.set( 'view engine', 'html' );
app.engine( '.html', require( 'ejs' ).__express );
 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());
 
app.get('/', function(req, res) {
　　res.render('index');
});
app.get('/home',function(req,res){
　　res.render('home');
});
app.get('/login',function(req,res){
　　res.render('login');
});
app.post('/login',function(req,res){
　　var user={
　　　　username:'admin',
　　　　password:'admin'
　　}
　　if(req.body.username==user.username&&req.body.password==user.password) {
　　　　res.send(200);
　　}else{
　　　　res.send( 404 );
　　}
});
 
app.listen(80);

到這里，一個簡單的Post登錄就完成了，使用瀏覽器運行本地端口試試效果吧！

訪問控制

簡單登陸部分按照我們的求已經完成了，但網站好些並不安全，反復測試我們發現，home.html頁面本來是登陸以后才訪問的，現在我們不需登陸，直接在瀏覽器輸入也可訪問，這樣肯定是不能被允許的，那么我們還得再次對登陸功能進行強化。

1. login.html頁面增加EJS模板變量<%- message %>保存登陸提示信息。

...
<%- message %>
<h1>用戶登錄</h1>
...

2. home.html頁面，登陸成功后跳轉並傳入用戶名：

<h1>恭喜<em style="color:red"><%= user.username %></em>，登陸成功！</h1>

PS：使用EJS模板變量值使用<%= variable_name %>輸出方式，字符串輸出時默認經過escape轉義編碼。 當我們想要輸出一些動態生成的HTML標簽時可使用<%- variable_nam %>輸出方式，這種方式不會被escape轉義編碼。

3. home.html頁面添加退出鏈接，如下：

<p><a href="logout">退 出</a></p>

訪問控制

修改好了模板頁，下面開始修改啟動文件app.js的內容。

1. 安裝模塊express-session並引用，安裝、引用不在講述。

2. 使用新模塊進行訪問時間限制，如下：

var session = require('express-session');
...
app.use(session({
    secret:'secret',
    resave:true,
    saveUninitialized:false,
    cookie:{
        maxAge:1000*60*10 //過期時間設置(單位毫秒)
    }
}));

3. app.js文件新增中間件並設置模板變量值，如下：

app.use(function(req, res, next){
　　res.locals.user = req.session.user;
　　var err = req.session.error;
　　res.locals.message = '';
　　if (err) res.locals.message = '<div style="margin-bottom: 20px;color:red;">' + err + '</div>';
　　next();
});

res.locals對象保存在一次請求范圍內的響應體中的本地變量值。

PS：注意，中間件的放置順序很重要，等同於執行順序。而且，中間件必須放在HTTP動詞方法之前，否則不會執行。

4. 增加logout路徑處理(用戶登陸退出)和index路徑請求處理，如下：

app.get('/logout', function(req, res){
　　req.session.user = null;
　　req.session.error = null;
　　res.redirect('index');
});
app.get('/index', function(req, res) {
　　res.render('index');
});

5. 修改home路徑請求處理，如下：

app.get('/home',function(req,res){
　　if(req.session.user){
　　　　res.render('home');
　　}else{
　　　　req.session.error = "請先登錄"
　　　　res.redirect('login');
　　}
});

6. 修改路徑為login的Post請求

app.post('/login',function(req,res){
　　var user={
　　　　username:'admin',
　　　　password:'admin'
　　}
　　if(req.body.username==user.username&&req.body.password==user.password){
　　　　req.session.user = user;
　　　　res.send(200);
　　}else{
　　　　req.session.error = "用戶名或密碼不正確";
　　　　res.send( 404 );
　　}
});

 參考資料：http://www.dwz.cn/3e6UbG