Node.js+Express|Cookie&Session机制

2017-12-17 本文已影响0人绍重先

Q&A

各个用户的session name如何设置
- 用登陆的用户名？用当时时间？
  req.session.name = req.body.username
logout？url列表<a>标签post

html
                <li>
                    <a href="#" id = "logout">退出登陆</a>
                </li>

js
//登出事件监听
var logout = document.getElementById('logout');
logout.onclick = function(){
  alert('logout');
  var logoutForm = document.createElement("form");
  logoutForm.method = "post";
  logoutForm.action = "/logout";
  document.body.appendChild(logoutForm);
  logoutForm.submit();
  document.body.removeChild(logoutForm);
}

app.js(服务器)

//接受logout post
app.post('/logout',function(req,res){
  res.redirect('/login');
})

导航栏动态加载用户名
- ajax？成功！
  loadUserName

//typeInfo.html
                <li>
                    <a href="#" id="navUserName"></a>
                </li>

//typeInfo.js(网页脚本）
//ajax 动态显示登陆用户名
window.onload = function () {
  loadUserName();
}

function loadUserName() {
  //alert('loadUserName');
  var xmlhttp;
  if (window.XMLHttpRequest) {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
  }
  else {
    //IE6 IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("navUserName").innerText = xmlhttp.responseText;
    }
  }

  xmlhttp.open("GET", "/loadUserName");
  xmlhttp.send();
}

//app.js(服务器）
app.get('/loadUserName',function(req,res){
  console.log("AJAX LOAD USERNAME");
  console.log(req.session.name);
  res.send(req.session.name);
})

innerHTML和innerText差别

<html>
    <head><title>innerHTML</title></head>
    <body>
        <div id="d1"><p id="p1">hello world </p></div>
        <script>
            var content = document.getElementById("d1");
            alert(content.innerHTML);
            alert(content.innerText)
        </script>
    </body>
</html>

通过IE浏览器打开，弹出内容为 hello world 和 hello world
通过 Firefox 浏览器打开，弹出内容为 hello world  和undefined
通过 chrome 浏览器打开，弹出内容为 hello world 和 hello world

其中cookie的作用就是为了解决HTTP协议无状态的缺陷所作出的努力。至于后来出现的session机制则是又一种在客户端与服务器之间保持状态的解决方案。

让我们用几个例子来描述一下cookie和session机制之间的区别与联系。笔者曾经常去的一家咖啡店有喝5杯咖啡免费赠一杯咖啡的优惠，然而一次性消费5杯咖啡的机会微乎其微，这时就需要某种方式来纪录某位顾客的消费数量。想象一下其实也无外乎下面的几种方案：

该店的店员很厉害，能记住每位顾客的消费数量，只要顾客一走进咖啡店，店员就知道该怎么对待了。这种做法就是协议本身支持状态。
发给顾客一张卡片，上面记录着消费的数量，一般还有个有效期限。每次消费时，如果顾客出示这张卡片，则此次消费就会与以前或以后的消费相联系起来。这种做法就是在客户端保持状态。
发给顾客一张会员卡，除了卡号之外什么信息也不纪录，每次消费时，如果顾客出示该卡片，则店员在店里的纪录本上找到这个卡号对应的纪录添加一些消费信息。这种做法就是在服务器端保持状态。

以商店会员机制为例，session就是给客户一张只有会员号的会员卡，相关对应的消息存储在服务器；而cookie则是包含着用户所有信息,包含值，过期时间等消息的会员卡。

Nodejs+Express 实践保持登陆状态

安装依赖包

npm install --save express-session

在相应页面路由

var express = require('express');
var router = express.Router();
var session = require('express-session');
//set session
/*
secret:通过secret字符串，计算hash值之后存贮在cookie中 
      以防止singnedCookie被篡改
cookie：设置存放session id的cookie相关选项，默认为：
  (default:{
    path:'/',
    httpOnly:true,
    secure:false,
    maxAge:null
  })
*/
router.use(session({
  secret: 'test secret',
  cokkie: { maxAge: 60 * 1000 * 300 } //过期时间 ms
}))

//process session
router.get('/',function(req,res){
  //session 已经登陆
  if(req.session.sign){
    console.log(req.session);
    res.send('<strong>'+req.session.name+'</strong>'+'Nice to see you again');
  }
  else{
    //未登陆过
    req.session.sign=true;
    req.session.name = 'Type Zero';
    res.end('Welcome:'+'<strong>'+req.session.name+'</strong>');
  }
});
module.exports = router;

Node.js+Express|Cookie&Session机制

Q&A

Nodejs+Express 实践保持登陆状态

猜你喜欢

热点阅读