状态管理

概念:

将浏览器与web服务器的多次交互当作一个整体来处理,将多次交互所涉及的数据状态保存下来。

管理方式1:将状态保存在浏览器,需要使用cookie技术

管理方式2:将状态保存在服务器,需要使用session技术

一:cookie

cookie是一种客户端的状态管理技术。

当浏览器访问服务器时,服务器会将一些信息以set_cookie消息头的形式发送给浏览器,浏览器会将这些数据保存下来,当浏览器再次访问服务器时,会将这些数据以cookie消息头的形式一并发送给服务器。(有几个cookie,就有几个消息头)。

二:session

服务端为了维护保存状态而创建的特殊对象。

1.原理

1.浏览器第一次请求服务器,服务器创建session对象

2.session对象产生一个唯一的sessionid

3.服务器将sessionid返回给浏览器并存放在cookie中

4.浏览器第二次请求服务器,将sessionid提交给服务器

5.服务器拿到sessionid去查找匹配的session对象

2.会话结束的情况

1.服务器把sessionid删掉了

2.浏览器把cookie里面的sessionid给清除了

3.特点
  1. 放在服务器端
  2. 不存在大小的限制
  3. 每一个用户都有自己独立的session对象
  4. 每个session都有一个sid
  5. sid存在cookie里面或者其他地方(比如localStorage)
4.缺点
  • 消耗服务器内存
  • 存在集群环境下的共享问题
5.操作
  1. 下载express-session插件

    npm i express-session
    
  2. 在app.js中引入session

    //引入session插件
    var session = require('express-session');
    
  3. 在app.js中的静态页面后写写关于session的配置

    //必须在静态页面后面写
    app.use(session({secret:"lovo", // 加密密钥resave:false, // 强制保存session,默认为true,即使它没有变化,建议falsesaveUninitialized:true // 强制将未初始化的session存储(当新建一个sesison,但未设定属性和值时处于未初始化状态)
    }));
    
  4. 在你要存入session对象的地方,把数据添加到session里面(如:在我的登录的地方存放我的用户信息数据)

    //登录成功后把信息存放在session里面
    router.post('/login',async function (req, res) {let { username, userpwd } = req.body;let data = await userService.login({username,userpwd});console.log(data);if (data.length > 0) {//成功后将数据添加到session对象里面req.session.user = data[0];res.send({status:1});}else {res.send({status:0});}
    });
    
  5. 在表现层写入方法来获取服务器中现存得session对象(如:我需要在登成功的时候才能跳到信息管理页面且用户那显示的名字是我的名字,还有在没有登录的情况下信息管理页面无法打开)index.js

    //创建一个获取session对象的方法,提供给浏览器获取session的方法
    router.get("/getSession",function(req,res){let user = req.session.user;//在有数据的时候就返回数据,没数据的时候就返回一个空对象res.send({data:user || {}});
    })//点击注销的时候删除session方法
    router.get("/removeSession",function(req,res){//比如在我点击一个东西需要退出的时候,就把我的用户信息给清空req.session.user = null;res.send({status:1});
    })
    
  6. 然后在页面需要显示的地方用ajax来获取信息来显示

     //用ajax方法来获取传来的session对象名字
    $.ajax({type:"get",url:"/getSession",success(res){console.log(res.data.username);//还有当用户信息不存在的时候刷新会返回登录页面//Object.keys(res.data).length==>当前对象长度,如果长度等于0,说明session里面没有用户信息,你要直接访问信息管理就不能访问if(Object.keys(res.data).length == 0){location.href = "#login";}else{$("#username").html(res.data.username);}}
    })
    //点击退出的时候就跳转到登录页面,
    $("#removeSession").click(function(){$.ajax({type:"get",url:"/removeSession",success(res){console.log(res,res.status);if(res.status == "1"){location.href = "#login";}}})
    })
    

三:token

token验证失败返回401;

0.原理

1.浏览器第一次请求服务器,服务器会将状态信息进行签名(加密)并生成token

2.服务器将token返回响应给浏览器

3.浏览器接收到token后保存在浏览器中(cookie,local,session)

4.浏览器再次请求服务器并将token提交给服务器

5.服务器接收到token后进行解密并获取到其中的状态信息

1.优缺点

优点

  • 更高的安全性 (cookie缺点token优点)
  • 没有大小的限制 (cookie缺点~)
  • 不会消耗服务器的内存 (session缺点~)
  • 更适合集群下状态的管理 (session缺点~)

缺点

  • 开发难度高点
2.加密算法
2.1对称加密

只有一把钥匙,加密和解密是同一把钥匙;举个例子:开门,关门只需要一把钥匙就行,这把钥匙叫:密钥

代表性:AES,DES

2.2非对称加密

有两把钥匙,加密:公钥;解密:私钥;举个例子:比如锁和钥匙,加密就是锁,解密就是钥匙

代表性:RSA

2.3hash加密

别名:散列算法,哈希算法

单向加密,不能还原,只能加密不能解密,除非破解密码

一般用来测试安全性

代表性:MD5,sha-1,sha-256,sha-512

  1. 下载插件

    npm i crypto
    
  2. 用的sha-256,封装方法,新建一个util.js来配置

    const crypto = require('crypto');
    module.exports.sha256 = function(str){let sha = crypto.createHash('sha256');return sha.update(str).digest('hex');
    }
    
  3. 给密码加密

    //引入util文件
    const {sha256} = require("../util");
    //给密码加密
    //注册
    router.post('/reg',async function (req, res) {let { username, userpwd } = req.body;//给密码加密:userpwd:sha256(userpwd)let data = await userService.insert({username,userpwd:sha256(userpwd)});console.log(data);res.send({msg:"注册成功",data});
    });
    
3.操作
  1. 下载中间件

    作用:获取浏览器返回的tooken信息来进行解密

    //可删除jwt
    npm uninstall express-jwt
    //下载的是最新版的
    npm i express-jwt
    //可控制下载版本
    npm i express-jwt@6
    
  2. 引入中间件(app.js)

    //引入可以获取浏览器返回的tooken信息来进行解密
    var jwt = require('express-jwt');
    
  3. 配置token (app.js)

    const {secretKey,algorithms,unless} = require('./util');
    
  4. 在工具文件里面配置中间件(util.js)

    //algorithms:设置算法,可以通过对称加密啥的算法
    //secretKey:设置密钥
    //unless:设置需要排除的路径,里面的路径可以以正则的方式写
    module.exports= {//配置token中间件"secretKey":"lovo","algorithms":["HS256"],"unless":{path:[/^\/users\/.*/,"/favicon.ico","/upload"]},//配置加密算法sha256(str){let sha = crypto.createHash('sha256');return sha.update(str).digest('hex');}}
    
  5. 在登陆成功后生成token

    • 生成token的插件

      npm i jsonwebtoken
      
    • 加密签字生成token(表现层user.js中登录成功后)

      //数据,密钥
      //加密签字生成token
      let token = jwt.sign({data:data[0]}, secretKey);
      //登陆成功响应回浏览器res.send({token,status:1});
      
    • 测试

      //中间件规范(记得在请求头里面测试)
      //authorzation格式,Bearer token字符串
      authorzation:请求头
      Bearer token加密后的字符串
      

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gqS8laik-1651244787189)(E:\node.js\img\token.png)]

  6. 解密(表现层index.js)

    //token
    router.get("/getToken",function(req,res){//获取到客户端发送过来的tokenconst token = req.get("Authorization");console.log("token",token);//将编码后的token再转换过来const data = jwt.verify(token.split(" ")[1],secretKey);res.send({data:data.data});
    })
    
  7. 把登录成功后的数据上传到浏览器的localStorage里面(pages里面的login.js)

    localStorage.token = res.token;
    
  8. 然后给ajax配置一个全局变量的请求头

    // 设置ajax的全局属性,用于提交token信息
    $.ajaxSettings.beforeSend = function(xhr){// 在这里加上你的 token //setRequestHeader:设置请求头xhr.setRequestHeader('Authorization','Bearer ' + localStorage.token);
    }
    $.ajaxSettings.error = function(err){if(err.status == 401){location.href = "#login";}
    }
    
  9. 在manage.js获取登录信息

     $.ajax({type:"get",url:"/getToken",success(res){$("#username").html(res.data.username);}})
    

四:比较cookie 与 session 的优缺点:

cookie 优点: 不占用服务器的内存资源。

session 的优点: 安全,且可以保存更丰富的数据类型。

session 的缺点:可能会占用过多的内存空间,多台服务器负载均衡,session 同步+

   $.ajax({type:"get",url:"/getToken",success(res){$("#username").html(res.data.username);}})

四:比较cookie 与 session 的优缺点:

cookie 优点: 不占用服务器的内存资源。

session 的优点: 安全,且可以保存更丰富的数据类型。

session 的缺点:可能会占用过多的内存空间,多台服务器负载均衡,session 同步+

node状态管理cookie,session,token的各自特点和使用方法还有hash算法加密相关推荐

  1. 2、cookie session token详解

    cookie session token详解 转自:http://www.cnblogs.com/moyand/ 发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, ...

  2. cookie session token 之间的区别

    cookie 和session的区别 1.cookie数据存放在客户的浏览器上,session数据放在服务器上. 2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 ...

  3. 熬夜彻底搞懂Cookie Session Token JWT

    一切的根源就是因为 HTTP 是一个无状态的协议. HTTP 是一个无状态的协议 什么是无状态呢?就是说这一次请求和上一次请求是没有任何关系的,互不认识的,没有关联的. 看过电影<夏洛特烦恼&g ...

  4. cookie session token区别_彻底理解cookie,session,token

    点击上方"Java知音",选择"置顶公众号" 技术文章第一时间送达! 作者: 墨颜丶 cnblogs.com/moyand/p/9047978.html 发展史 ...

  5. cookie session token区别_cookie、session与token的真正区别

    发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议, 就是请求加响应, 尤其是我不用记 ...

  6. Cookie Session Token 与 JWT 解析

    首先先了解一些关键词 认证.授权与凭证 什么是认证(Authentication)? 通俗地讲就是 验证当前用户的身份是否合法的过程,即你是谁?证明"你是你自己"(比如:你每天上下 ...

  7. 大剑无锋之浅析Cookie/Session/Token

    Cookie Cookie是客户端保存用户信息的一种机制,用来记录用户的一些信息,也是实现Session的一种方式.Cookie存储的数据量有限,且都是保存在客户端浏览器中.不同的浏览器有不同的存储大 ...

  8. 测试面试题:cookie/session/token 分别表示什么意思,有什么区别?

    测试面试必问:   token,cookie,session 有什么区别? 1.解释 1>Cookie cookie 是一个非常具体的东西,指的就是浏览器里面能永久存储的一种数据,仅仅是浏览器实 ...

  9. 状态管理技术~~Session

    一.什么是session session用于跟踪客户的状态 session指的是在同一段时间,单个客户与web服务器的一连串的交互过程 在一个session中,客户可能会多次请求访问同一个网页,也可能 ...

  10. 观看慕课老师milanlover视频JSP状态管理+cookie

    创建cookie对象调用它的构造方法,构造方法接收两个参数,是一种键值对描述:键:cookie对象的字符串描述:值:要保存的cookie对象. Value:字符串 The superclass &qu ...

最新文章

  1. 【Dual-Path-RNN-Pytorch源码分析】Dual_RNN_Block
  2. Unicode 和 UTF-8 有何区别?
  3. 微信开发-ACCESS TOKEN 过期失效解决方案
  4. Shell test命令(Shell [])详解,附带所有选项及说明
  5. HttpServletRequest(request的一些API)
  6. n个整数,其中有两个数是重复的,要求找出这两个重复的整数
  7. 二级计算机vf里的sql,计算机等级考试二级VF考点:SQL语言
  8. LoadDruidSegmentStep failed SQLException: Cannot load JDBC driver class ‘com.mysql.jdbc.Driver‘
  9. mysql 重要维护工具 图解
  10. QPS、TPS、PV、UV、GMV、IP、RPS?
  11. AIR移动平台打开图片文件
  12. 使用c#语言进行游戏开发,Unity 3D脚本编程——使用C#语言开发跨平台游戏
  13. stm32单片机端口映射_STM32F103C8T6 can端口映射
  14. 【命令】截屏命令---screencap
  15. 2021年复盘总结发现了C站博主缺少的赚钱之路
  16. 方框加对勾怎么输入_Word怎么输入对号和方框对勾
  17. 利用Python和OpenCV将图像灰度图转为3D图并显示
  18. 从雀书无代码应用——浅谈零代码开发平台(上)
  19. VSCode下载及安装
  20. 东数西算(24H限时下载)

热门文章

  1. 模块化编程的六大原则
  2. 输入年月日获取农历日期
  3. 携手李连杰壹基金计划 创慈善博客
  4. selenium在爬虫领域的初涉(自动打开网站爬取信息)
  5. wps 邮件合并 mysql_笔记13 - 邮件合并
  6. html div与span同行,div和span在一行 div和Span及a标签的区别
  7. 云原生架构下的 API 网关实践: Kong (三)
  8. 蜀门Online 简单打怪脚本(vbs)
  9. SONY无线PS2遥控手柄与stm32单片机通信
  10. 迅手系统连接不到服务器,逆火快速上手.doc