基於express的登陸控制

嘮叨幾句

        web應用基於http協議傳輸,但因爲http協議是無狀態的,也就是說不具備記憶功能,這意味如果後續處理需要前面的信息,那麼需要將前一步的信息重新傳輸。舉個例子,淘寶購物的時候,都是先天訂單,再支付,假設這兩步分開進行的,那麼當你填完訂單需要支付時,需要將你的訂單信息也再次提交,這樣無形中增大了數據傳輸量,也顯得麻煩,正因爲如此,所以產生了cookie,每次請求時,都會在頭部傳遞cookie用於傳遞前一步的信息,再說就多了,打住了,有興趣的去查閱下http的請求結構  請求行 請求頭與請求體,一般簡稱line header body.


爲什麼不說session?

        我習慣於將session看做一種特殊的cookie,cookie與session的區別我不多說,瞭解原理的同學會知道,session也是需要cookie來傳遞sessionid的,也就是說當客戶端禁止掉cookie以後,你的session也會失效.所以我會圍繞cookie來介紹.


express的cookie

       express框架內置了cookie模塊,但如果要使用session,請確保安裝了cookie-parser與express-session模塊,沒有沒關係,萬能的npm幫你搞定


       設置cookie

      

   response.cookie('username','zhangsheng',{expires: new Date(Date.now()+3600000),httpOnly:true, path:'/'});

      參數含義分別是cookie的名字,cookie的值, expires爲過期時間,單位毫秒,httpOnly爲http專用,https則無效,path是設置的域(/代表全域,關於域的概念請自行百度);

     

      訪問cookie

      可以直接通過res.cookies來訪問


      刪除cookie

      通過內置api res.clearCookie('username'); 第二個參數爲可選


      如何使用session?首先在app.js中編寫如下:

      

app.use(session({
    //混淆的加密串隨便填
    secret: '12345',
    //這裏的name值得是傳遞sessionid的cookie的name,默認是:connect.sid
    name: 'web',
    //設置maxAge是60000ms,即60s後session和相應的cookie失效過期
    cookie: {maxAge: 60 * 1000 },
    //是指每次請求都重新設置session cookie,假設你的cookie是10分鐘過期,每次請求都會再設置10分鐘
    resave: true,
    //是指無論有沒有session cookie,每次請求都設置個session cookie ,默認給個標示爲 connect.sid
    saveUninitialized: false
}));

       設置session的值

        req.session.loginstatus = 1  loginstatus爲名字


        讀取session

        req.session


        刪除session

        res.clearCookie('web'),有人可能納悶了,明明要刪除的是session,爲什麼會使用刪除cookie的方法呢?再理解一下,session是一種特殊的cookie,我將傳遞sessionid的cookie刪除掉,那麼session也會失效,我設置的傳遞sessionid的cookie名稱叫做web  所以我幹掉web即可 服務端session時效到後會被自動清除掉


測試一下

分別編寫login.js與article.js router  login中代碼如下

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

/**
 * 登陸頁面
 */
router.get('/',function (request,response,next){
    response.render('login/index');
});

/**
 * 登陸處理  這塊可改爲數據庫查詢
 */
router.post('/submit',function (request,response,next){
    if(typeof request.body.username === 'undefined' ||  request.body.username === ''){
        response.json({code:1,message:"請提交用戶名"});
    }
    var username = request.body.username;
    if(typeof request.body.password === 'undefined' ||  request.body.username === ''){
        response.json({code:1,message:"請提交用密碼"});
    }
    var password = request.body.password;
    if(username != 'zhangsheng' || password !='123456'){
        response.json({code:1,message:"用戶名或密碼錯誤"});
    }else{
        request.session.loginstatus = 1;
        response.cookie('username','zhangsheng',{expires: new Date(Date.now()+3600000),httpOnly:true, path:'/'});
        response.redirect('/article');
    }
    response.end();
});


/**
 * loginout
 */
router.get('/out',function (request,response,next){
    response.clearCookie('username');
});


module.exports = router;

index頁面非常簡單 我使用的是ejs模版 如下

<!DOCTYPE html>
    <html>  
        <head>
            <meta http-equiv=“Content-Security-Policy” content=“upgrade-insecure-requests” />
            <title>登陸</title>
        </head>  
    <body>
        <form action="/login/submit" method="post">
            用戶名:<input type="text" name="username" /><br />
            密碼:<input type="password" name="password" /><br />
            <input type="submit" value="登陸"/>
        </from>
    </body>
</html>

然後是article.js

/**
 * 文章編輯頁面
 */

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

router.all('*',function (request,response,next){
    console.log(request.session);//這裏輸出session只爲介紹session的訪問方法

    if(typeof request.cookies.username == 'undefined' || request.cookies.username != 'zhangsheng'){
        response.json({message:'非法訪問'});
        response.end();
    }
    next();
});


/**
 * 首頁
 */
router.get('/',function (request,response,next){
    response.render('article/index');
});

/**
 * 提交數據
 */
router.post('/submit',function (request,response,next){
    
});


module.exports = router;

運行結果如下 登陸後


控制檯輸出設置的session信息


瀏覽器cookie如下




清除掉cookie再次訪問 提示請登錄!   訪問控制完成。

本篇是一個很簡單的使用介紹,很多東西可能講解不到位,還請諒解

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章