一、Session
1. Session的由来
因为http协议是无状态的,使其不能记住用户的状态。那什么是无状态呢?就是说这一次请求和上一次请求是没有任何关系的,互不认识的,没有关联的。
例如:刚刚输入了用户名和密码,请求成功跳转购物车,当想要往购物车里添加商品时,会提示需要登录才能使用(这点是路由守卫的功能~),当再次输入用户名密码后,点击添加进购物车还是提示需要登录捏。这就是无状态。
这样在以前没有问题,但是随着交互式Web应用的兴起,如购物网站或需要登录的网站等等,就需要会话管理,于是会话标识(session id)出现。
session id的作用其实就是跟踪用户状态和区分用户。
2. Session的工作原理
用户第一次请求服务器
- 发送请求到服务器,服务器开辟一块内存空间用来保存服务器端所有的session对象,每个session对象都会有一个唯一的session id。
- 服务端把session id返回给浏览器(在响应头的set-cookie中),浏览器默认会用cookie的方式去存储会话标识,如果浏览器禁用了cookie,则可以用url的方式(不常用)。
- 之后的请求会把session id在请求头的cookie(name为 jsession,value为 session id)中携带,服务端查找是否有该session id对应的session。
session的sessionId执行依赖于Cookie,但不仅仅是Cookie,还可以是LocalStorage或者URL回写传递给服务器。
Session和Cookie
session: 服务器会给第一次请求的用户生成一个session对象,并有一个session id与之对应,自己保存在内存中还会返回给浏览器;当客户端再次发送请求的时候,会将这个Session id带上,服务器接受到请求之后就会依据Session id找到相应的Session对象,从而再次使用之。
cookie: 浏览器接收session id可以通过cookie保存到浏览器。
token: 是另一种通过验证解决http协议无状态的方案,它利用验证机制,也可以用cookie或者本地存储保存,此处不展开。
二、Cookie
Cookie是HTTP协议里面请求头的组成部分,它是一种客观存在的文本数据,并且体积很小。Cookie存在于客户端里面,所以它是可以被我们浏览器(客户机)给清除掉的。HTTP是无状态的(准确来说应该是HTTP1.0)。
1.2 Cookie的组成
Cookie 的名字
Cookie 的值(真正的数据写在这里面)
到期时间(超过这个时间会失效)
所属域名(默认为当前域名)
生效的路径(默认为当前网址)
1.3 Cookie的生成
1.2 会话cookie与持久cookie
-
如果不设置过期时间,则表示这个cookie生命周期为浏览器会话期间,只要关闭浏览器窗口,cookie就消失了。这种生命期为浏览会话期的cookie被称为会话cookie。会话cookie一般不保存在硬盘上而是保存在内存里。
-
如果设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再次打开浏览器,这些cookie依然有效直到超过设定的过期时间。
存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存的cookie,不同的浏览器有不同的处理方式。
session cookie和session对象的生命周期是一样的吗?
当用户关闭了浏览器虽然session cookie已经消失,但session对象仍然保存在服务器端。
2. js-cookie
JavaScript Cookie是一个简单、轻巧的JavaScript API,专门用于处理cookie。
2. js-cookie特性
- 适用于任何浏览器
- 接受所有字符
- 经过严格测试
- 无依赖性
- 支持JSON
- 支持AMD / CommonJS
- 符合RFC 6265
- 支持自定义编码/解码
- 压缩后约900个字节!
3. 使用方式
3.1 安装
npm i [email protected]
3.2 引入
import Cookie from 'js-cookie'
3.3 使用
3.3.1 添加
// 创建一个名称为name,对应值为value的cookie,由于没有设置失效时间,默认失效时间为浏览器会话结束,即关闭浏览器
Cookies.set(name, value)
// 创建一个有效时间为7天的cookie
Cookies.set(name, value, {
expires: 7 })
// 创建一个带有路径的cookie
Cookies.set(name, value, {
path: '' })
// 创建一个value为对象的cookie
const obj = {
name: 'ryan' }
Cookies.set('user', obj)
3.3.2 获取
// 获取指定名称的cookie
Cookies.get(name) // value
// 获取value为对象的cookie
const obj = {
name: 'ryan' }
Cookies.set('user', obj)
// 把字符串转回js对象
JSON.parse(Cookies.get('user'))
// 获取所有cookie
Cookies.get()
3.3.3 删除
// 删除指定名称的cookie
Cookies.remove(name) // value
// 删除带有路径的cookie
Cookies.set(name, value, {
path: '' })
Cookies.remove(name, {
path: '' })
三、Token
1. Token的由来
Token是弥补Session以及Cookie的缺陷而产生的:
- 服务器压力过大,需要存储所有请求用户的session id
- 不安全,cookie可能会被劫持,引起。
2. 用户第一次请求登录服务器流程
- 携带用户名和密码或者其他身份信息给服务器请求登录
- 服务器接收,验证用户名和密码,如果成功,则会对数据(用户名和密码)利用一些算法,生成签名(sign),和数据一起组成token(一串字符串)也叫令牌;返回响应给浏览器,token在
- 浏览器接收响应,把token存储到本地(使用localStorage持久化,你也可以用其他的,如cookie、sessionStorage);之后的每次请求会携带token在请求头中发送给服务器
- 服务器对token进行解密和再次计算,如果生成的新token和浏览器发送来的相同则验证通过