聊聊會話控制——cookie&session

會話控制

• http協議是一個無狀態的協議；
• 服務器不能區分出兩次請求是否發送自同一個客戶端；但是在實踐開發中確實有該需求，而且十分的迫切；
• 會話控制主要採用兩個技術Cookie和Session;

Cookie

• Cookie相當於服務器發送給瀏覽器的一張票，服務器將cookie發送給瀏覽器後，瀏覽器每次訪問都會將cookie發回，這樣服務器就可以根據瀏覽器發回的cookie來識別出不同的用戶了。

• cookit的使用

  • 類比看電影：
    • 1、電影院發票；
    • 2、用戶取票；
    • 3、檢票，用戶帶票入場；
  • cookie的使用流程：
    • 1、服務器向瀏覽器發送cookie；
    • 2、瀏覽器收到並將cookie保存；
    • 3、瀏覽器帶着cookie向服務器發票；
    • 4、檢查用戶的cookie.

• cookie是什麼？
  

  • 實際上就是一個頭，服務器以響應頭的形式將cookie發送給瀏覽器；
  • 瀏覽器以請求頭的形式將cookie發回給服務器；
  • 我們可以通過爲不同的用戶發送不同的cookie來識別出用戶；

• cookie的有效期

  • cookie也是有有效期的，瀏覽器並不會一直保存Cookie;
  • cookie的默認有效期是一次會話，會話指的是一次打開關閉瀏覽器的過程，一旦關閉瀏覽器cookie則會自動失效；
  • 設置cookie的有效期；

• cookie的設置

  • 通過npm下載cookie-parser；
  • 配置好express框架；
  • 將cookieParser設置爲中間件

  //將cookieParser設置爲中間件
  app.use(cookieParser());
  

  • 通過express框架中的res，res.cookie(name, value [, options]);設置cookie；

  //設置一個十分鐘有效的cookie
  //res.cookie("name","sunwukong",{maxAge:1000*60*10});
  //設置一個永久有效的cookie
  res.cookie("name","sunwukong",{maxAge:1000*60*60*24*365*10});
  //示例：
  app.get('/sendCookie',function (req,res) {
      //向客戶端發送cookie:res.cookie(name, value [, options])
  res.cookie("name","sunwukong",{maxAge:1000*60*10});
  res.send("Cookie已經發送給瀏覽器~~~");
  })
  

  • 可以通過express框架中的req讀取cookie；

  app.get('/checkCookie',function (req,res) {
  //獲取用戶發送的cookie
  var cookie = req.get('Cookie');
  console.log(req.cookies);
  //當通過res.cookie，設置完cookie後再次訪問服務器，可以得到cookie:{ 'Webstorm-65f0180d': '55600384-8e0d-481e-807c-35344570ed7f',name: 'sunwukong' }
  //以及req.cookies.name爲sunwukong；
    console.log(req.cookies.name);//undefined
  res.send('檢查用戶的Cookie');
  })
  

• cookie的刪除

  • 可以設置同樣名稱的屬性，maxAge設置爲0；

  res.cookie('name','shaheshang',{maxAge:0});
  

  • 使用clearCookie

   res.clearCookie('name');
  

• cookie的作用

  • 1、保存用戶的登錄狀態；
  • 2、保存用戶的用戶名；
  • 3、廣告

//cookie的完整示例代碼
var express = require('express');
var app = express();

//引入cookie-parser
var cookieParser = require('cookie-parser');


//將cookieParser設置爲中間件
app.use(cookieParser());

app.get('/checkCookie',function (req,res) {
   //獲取用戶發送的cookie
   var cookie = req.get('Cookie');
   // console.log(cookie);//Webstorm-65f0180d=55600384-8e0d-481e-807c-35344570ed7f
   //當引入cookie-parser以後，在Request中會多一個cookies這個屬性。這個屬性值是一個對象，它會將cookie中解析的內容轉換爲對象中的屬性.
   console.log(req.cookies);//{ 'Webstorm-65f0180d': '55600384-8e0d-481e-807c-35344570ed7f' }
   //當設置完 res.cookie("name","sunwukong",{maxAge:1000*60*10});後再次訪問服務器，可以得到cookie:{ 'Webstorm-65f0180d': '55600384-8e0d-481e-807c-35344570ed7f',name: 'sunwukong' }
   //以及req.cookies.name爲sunwukong；
    console.log(req.cookies.name);//undefined
    res.send('檢查用戶的Cookie');
})

app.get('/sendCookie',function (req,res) {
    //向客戶端發送cookie:res.cookie(name, value [, options])
    res.cookie("name","sunwukong",{maxAge:1000*60*10});
    res.send("Cookie已經發送給瀏覽器~~~");
})
app.listen(3000,function () {
    console.log('ok');
})

//一個cookie的練習
var express = require('express');
var app = express();
var bodyParser = require('body-parser');

//引入cookie-parser
var cookieParser = require('cookie-parser');

app.set('view engine','ejs');
app.set('views','views');

//將cookieParser設置爲中間件
app.use(cookieParser());
//bodyParser中間件用來解析http請求體，是express默認使用的中間件之一。
//使用express應用生成器生成一個網站，它默認已經使用了 bodyParser.json 與 bodyParser.urlencoded 的解析功能，除了這兩個，bodyParser還支持對text、raw的解析。
//bodyParser.urlencoded是用來解析我們通常的form表單提交的數據，也就是請求頭中包含這樣的信息： Content-Type: application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended:false}));
//映射表單的路由
app.get('/login',function (req,res) {

    res.render("views.ejs",{cookies:req.cookies});
})

//映射一個處理表單的路由
app.post('/login',function (req,res) {
	//獲取用戶名和密碼
    var username = req.body.username;
    var password = req.body.password;
    console.log(req.body);//{ username: 'admin', password: '123123' }
    console.log(username);
    console.log(password);
    //驗證用戶名和密碼是否正確
	//密碼只要是123123 全都登錄成功
    if(password == "123123"){
        //登錄成功
        //將username作爲cookie發送給客戶端
        res.cookie("username",username,{maxAge:1000*60*60*24*30});
        res.send("<h1>登錄成功</h1>");
    }else{
        //登錄失敗
        res.send("<h1>用戶名或密碼錯誤</h1>");
    }
})

app.listen(3000,function () {
    console.log('ok');
})


//views.ejs文件
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
<h3>歡迎登錄</h3>
<form action="/login" method="post">
    用戶名 <input type="text" name="username" value="<%=cookies.username%>"> <br /><br />
    密碼 <input type="password" name="password"> <br /><br />
    <input type="submit" value="登錄"> <br /><br />
</form>
</body>
</html>

session

• cookie的不足

  • 1、cookie都是明文保存的，容易泄露用戶的隱私；
  • 2、瀏覽器對於cookie的數量和大小都是有限制的，不能使用cookie保存過多的信息；
  • 3、cookie是由服務器發送給瀏覽器，再由瀏覽器發回給服務器，如果cookie過大會導致請求速度過慢，降低用戶的體驗；

• 爲了解決cookie的缺陷所以引入了session機制，session像銀行卡，我們將錢存入到銀行的賬戶中，通過賬號和賬戶進行管理

• session是基於cookie的，如果沒有cookie，session無法使用；
  

• session的原理：

  • session將用戶的數據統一保存到服務器中的一個對象裏，每一次會話都會有一個對應的對象用來保存數據，每一個session對象都會有一個唯一的id，我們會將id以cookie的形式發送給瀏覽器，瀏覽器只需要在發送請求時將cookie發回，即可找到它對應的session對象；

• session中數據的有效期就是一次會話，瀏覽器關閉session中的數據自動丟失；

• session的刪除：

  //登錄成功，將用戶信息保存到session中
  req.session.loginUser = loginUser;
  //將session中的loginUser刪除
  delete req.session.loginUser;
  

• session的應用

  • 我們可以在用戶登陸成功以後，將用戶的信息保存到session對象中，這樣我們就可以通過檢查session中是否有用戶信息，來判斷用戶是否登錄。

//session講解
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
//引入express-session
var session = require("express-session");

//引入cookie-parser
var cookieParser = require("cookie-parser");

app.set("view engine" , "ejs");
app.set("views" , "views");
//將cookie-parser設置爲中間件
app.use(cookieParser());
//將session設置爲中間件
app.use(session({
    resave:false,
    saveUninitialized:false,
    secret:"hello"
}));


app.use(bodyParser.urlencoded({extended:false}));


//創建一個路由來測試session
app.get("/test01",function (req , res) {

    console.log(req.session);
    /*Session {
     cookie:
     { path: '/',
     _expires: null,
     originalMaxAge: null,
     httpOnly: true } }*/

    //set-cookie: connect.sid=s%3AhwfdjKPhxN3cwXhde3vBaMHPhBelGixH.rYDSaLmxxD3j6vXYmiWgms3bxF3SyDy98igyQtKoCyU; Path=/; HttpOnly
    req.session.str = "向session存儲的數據";

    res.send("測試session");
});

app.get("/test02",function (req , res) {

    res.send(req.session.str);
});


app.listen(3000,function () {
    console.log("OK");
});