token 验证和 H5 中的页面存储技术_h5 token

一、token验证

1、cookie

cookie 是一个非常具体的东西，指的就是浏览器里面能永久存储的一种数据，仅仅是浏览器实现的一种数据存储功能。

cookie由服务器生成，发送给浏览器，浏览器把cookie以 K-V 形式保存到某个目录下的文本文件内，下一次请求同一网站时会把该cookie发送给服务器。由于cookie是存在客户端上的，所以浏览器加入了一些限制确保cookie不会被恶意使用，同时不会占据太多磁盘空间。

2、session

服务器使用session把用户的信息临时保存在了服务器上，用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全，可是session有一个缺陷：如果web服务器做了负载均衡，那么下一个操作请求到了另一台服务器的时候session会丢失。

3、cookie和session的区别

session是存储服务器端，cookie是存储在客户端，所以session的安全性比cookie高。

获取session里的信息是通过存放在会话cookie里的session id获取的。而session是存放在服务器的内存中里，所以session里的数据不断增加会造成服务器的负担，所以会把很重要的信息存储在session中，而把一些次要东西存储在客户端的cookie里。

cookie确切的说分为两大类：会话cookie和持久化cookie。

会话cookie是存放在客户端浏览器的内存中，他的生命周期和浏览器是一致的，当浏览器关闭会话cookie也就消失了，

持久化cookie是存放在客户端硬盘中，持久化cookie的生命周期是我们在设置cookie时候设置的那个保存时间。

session的信息是通过session id获取的，而session id是存放在会话cookie当中的，当浏览器关闭的时候会话cookie消失，所以session id也就消失了，但是session的信息还存在服务器端，只是查不到所谓的session，但它并不是不存在。所以session在服务器关闭的时候，或者是session过期，又或者调用了invalidate()，再或者是session中的某一条数据消失调用session.removeAttribute()方法，session在通过调用session.getsession可以得到创建。

4、基于服务器验证方式暴露的一些问题

Seesions：每次认证用户发起请求时，服务器需要去创建一个记录来存储信息。当越来越多的用户发请求时，内存的开销也会不断增加。

可扩展性：由于sessions 存放在服务器内存中，伴随而来的是可扩展性问题。当我们想要增加服务器来解决负载问题时，session 里的关键性信息会限制我们的扩展。

CORS (跨域资源共享)：当我们扩展应用程序，让数据能够从不同设备上访问时，跨域资源的共享会是一个让人头疼的问题。在使用 Ajax 抓取另一个域的资源时（移动端访问我们的 API 服务器），可能会出现禁止请求的情况。

CSRF (跨站请求伪造)：用户在访问银行网站时，他们很容易受到跨站请求伪造的攻击，并且能够被利用其访问其他的网站。

针对服务器验证方式暴露的一些问题我们迎来了token验证

5、token验证含义

简单理解，token验证就像一张令牌，是服务端生成的一串字符串，作为客户端进行请求的一个标识。基于 Token 的身份验证是无状态的，我们不用将用户信息存在服务器或 Session 中。这种概念解决了在服务端存储信息时的许多问题。没有 session 信息意味着你的程序可以根据需要去增减机器，而不用去担心用户是否登录和已经登录到了哪里。

6、token验证页面请求的控制流程

• 第一次登录时，需要用户名和密码。登录成功后服务器端会生成token标识，该标识返回给客户端
• 当用户再次发起请求时，只需要带上token标识即可,不需要用户名和密码

7、token验证的作用

• 防止表单的重复提交：
• 身份验证

8、token实现身份验证的流程

• A.客户端使用用户名和密码请求登录。
• B.服务端收到请求，验证用户名和密码。
  • (1) 在数据库中存放用户的信息(用户名、密码)
  • (2) 使用客户端提交的用户名、密码查询数据，若查询到了结果则表示是合法的用户,若没有查询到结果则是非法用户
• C.验证成功后，服务端会生成一个token，然后把这个token发送给客户端。
• D.客户端收到token后把它存储起来，可以放在cookie或者LocalStorage（本地存储）里。
• E.客户端每次向服务端发送请求的时候都需要带上服务端发给的token。
• F.服务端收到请求，然后去验证客户端请求里面带着token，如果验证成功，就向客户端返回请求的数据。

9、Tokens的优势

（1）无状态、可扩展

在客户端存储的 token 是无状态的，并且能够被扩展。基于这种无状态和不存储Session信息，负载均衡服务器 能够将用户的请求传递到任何一台服务器上，因为服务器与用户信息没有关联。相反在传统方式中，我们必须将请求发送到一台存储了该用户 session 的服务器上（称为Session亲和性），因此当用户量大时，可能会造成 一些拥堵。使用 token 完美解决了此问题。

（2）安全性

请求中发送 token 而不是 cookie，这能够防止 CSRF(跨站请求伪造) 攻击。即使在客户端使用 cookie 存储 token，cookie 也仅仅是一个存储机制而不是用于认证。另外，由于没有 session，让我们少我们不必再进行基于 session 的操作。

Token 是有时效的，一段时间之后用户需要重新验证。我们也不一定需要等到token自动失效，token有撤回的操作，通过 token revocataion可以使一个特定的 token 或是一组有相同认证的 token 无效。

（3）可扩展性

使用 Tokens 能够与其它应用共享权限。例如，能将一个博客帐号和自己的QQ号关联起来。当通过一个 第三方平台登录QQ时，我们可以将一个博客发到QQ平台中。

使用 token，可以给第三方应用程序提供自定义的权限限制。当用户想让一个第三方应用程序访问它们的数据时，我们可以通过建立自己的API，给出具有特殊权限的tokens。

（4）多平台与跨域

我们已经讨论了CORS (跨域资源共享)。当我们的应用和服务不断扩大的时候，我们可能需要通过多种不同平台或其他应用来接入我们的服务。

可以让我们的API只提供数据，我们也可以从CDN提供服务（Having our API just serve data, we can also make the design choice to serve assets from a CDN.）。 在为我们的应用程序做了如下简单的配置之后，就可以消除 CORS 带来的问题。只要用户有一个通过了验证的token，数据和资源就能够在任何域上被请求到。

      Access-Control-Allow-Origin: *       
1

（5）基于标准

有几种不同方式来创建 token。最常用的标准就是 JSON Web Tokens。很多语言都支持它。

以上内容多是参考这篇优秀文章https://blog.csdn.net/wnvalentin/article/details/89854980

二、H5中的页面存储技术

问题：我们了解到，http是一个无状态协议,当客户端与服务器完成请求-响应之后,他们之间的连接就断开了，那么当下次进入网页还需要重新输入信息，给用户带来的体验不佳。

1、会话跟踪技术（cookie，session）

• cookie：用于跟踪用户信息.在服务器端生成保存在客户端
• session:在服务器端生成，保存在服务器端

通过会话跟踪技术解决了保存用户信息的问题，但同时又带来了新的问题， cookie存储空间不足，cookie中每条cookie的存储空间为4k，而基本上每个简单文档内存大小都已经超过4k.

为了解决cookie存储空间不足问题，Web Storage 存储较好解决这一问题：Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

2、Web Storage

1. localStorage：长期存储，采用键-值对的格式 长期存放 ，即在浏览器关闭之后数据任然存在。

2. sessionStorage：临时存储，在浏览器打开期间用户信息一直存在，包括页面重新加载，但是当浏览器关闭后(会话结束)，数据会被清理。

3、使用方法

sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

1. 保存数据：localStorage.setItem('键'：'值')

//对象
const info = { name: 'anni', age: 18};
//字符串
const str="haha";
localStorage.setItem('anni', JSON.stringify(info));
localStorage.setItem('tony', str);
1
2
3
4
5
6

2. 获取数据：localStorage.getItem('键名')

var data1 = JSON.parse(localStorage.getItem('anni'));
var data2 = localStorage.getItem('tony');
1
2

3. 删除数据：localStorage.removeItem('键名')

//删除某个
localStorage.removeItem('anni');
//删除所有
localStorage.clear();
1
2
3
4

4、监听

Storage 发生变化（增加、更新、删除）时的触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage

window.addEventListener('storage', function (e) {
　　console.log('key', e.key); console.log('oldValue', e.oldValue);
　　console.log('newValue', e.newValue); console.log('url', e.url);
})
1
2
3
4

5、在浏览器中查看

6、注意点

1. localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorageapi与localStorage相同。
2. sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。
3. localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中）
4. sessionStorage作用域是窗口、协议、主机名、端口。

7、localStorage的优势与局限

1、localStorage的优势

1. localStorage拓展了cookie的4K限制
2. localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但存在浏览器的兼容问题

2、localStorage的局限

1. 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2. 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3. localStorage在浏览器的隐私模式下面是不可读取的
4. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5. localStorage不能被爬虫抓取到localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空