【js-06】其他页面如何判断是否已登录

郑州小课堂第112期

分享人：董瑞

1.背景介绍

当我们在网页中向服务器请求信息时，一般发送http请求， 但是HTTP协议是无状态协议，无状态是指协议对于事务处理没有记忆能力， 一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。
这就意味着服务器无法从连接上跟踪会话。那当我们在一个网站登录之后， 在网站其他页面怎么判断是否已经登录？ 要跟踪该会话，必须引入一种机制。

2.知识剖析

cookie

cookie指的是储存在用户本地终端上的数据，它是由Web服务器创建的， 当客户端第一次请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。
客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。 服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。

Cookie在生成时就会被指定一个Expire值，这就是Cookie的生存周期，在这个周期内Cookie有效， 超出周期Cookie就会被清除。有些页面将Cookie的生存周期设置为“0”或负值，这样在关闭浏览器时, 就马上清除Cookie，不会记录用户信息，更加安全。

用户也可以在浏览器端进行设置，禁止服务器向客户端浏览器颁发一个Cookie。

我们可以在脚本中读取，创建和存储 cookie; 例如下面的代码会输出本页面所有的Cookie。 document.write(document.cookie)

Session

Session是服务器端技术，利用这个技术，服务器在运行时可以为每一个用户的浏览器创建一个其独享的session对象.

由于session为用户浏览器独享，所以用户在访问服务器的web资源时， 可以把各自的数据放在各自的session中，当用户再去访问服务器中的其它web资源时， 其它web资源再从用户各自的session中取出数据为用户服务。

Session的使用比Cookie方便，但是过多的Session存储在服务器内存中，会对服务器造成压力。 虽然Session保存在服务器，对客户端是透明的，它的正常运行仍然需要客户端浏览器的支持。 这是因为Session需要使用Cookie作为识别标志。

HTTP协议是无状态的，Session不能依据HTTP连接来判断是否为同一客户， 因此服务器向客户端浏览器发送一个名为JSESSIONID的Cookie， 它的值为该Session的id（也就是HttpSession.getId()的返回值）。 Session依据该Cookie来识别是否为同一用户。

Web Storage

WebStorage是HTML5中本地存储的解决方案之一

Web Storage实际上由两部分组成:sessionStorage与localStorage。

localStorage和sessionStorage

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。

所以，在其它页面保持登录，可以在登录后往本地storage中存储一个关键字段（存储用户信息）,如 :login：true

在路由变化的时候，或者在页面跳转的时候，检测是该字段值是否正确，不正确则跳转登录页；

点击注销可以执行删除

3.常见问题

4.解决方案

下面方法能增加安全性：

• 设置该 Cookie 不能被脚本读取
• 对 Cookie 内容进行加密，在加密前嵌入时间戳，保证每次加密后的密文都不一样（并且可以防止消息重放）
• 客户端请求时，每次或定时更新 Cookie 内容
• 每次向 Cookie 写入时间戳，数据库需要记录最后一次时间戳
• 客户端提交 Cookie 时，先解密然后校验时间戳，时间戳若小于数据数据库中记录，即意味发生攻击

5.编码实战

6.扩展思考

Web Storage相对于cookie的优势

1.从容量上讲WebStorage一般浏览器提供5M的存储空间，用来存储视频、图片神马的不够，但对于绝大部分操作足矣

2.安全性上WebStorage并不作为HTTP header发送的浏览器，所以相对安全。

3.从流量上讲，因为WebStorage不传送到服务器，所以不必要的流量可以节省。

7.参考文献

参考一：HTML5 WebStorage

参考二：360百科

参考二：Nancy的专栏

8.更多讨论

存储方案各自的性能如何，他们的区别？