token、session、cookie辨析——学生在线大例会

http的特点

我们平时使用http进行前后端的数据传输，但是http的协议是无状态的，也就是他没有记忆。

比如，我自我介绍，我是前端总监wxy，然后我要求在座的前端同学每人vivo50。然后大家就vivo50。然后我出去，再进来，说我是移动总监gsr，让在座的移动同学vivo50。如果使用http传输，你并不知道我与之前是同一个人，你就会认为我是gsr，然后移动的同学就又vivo50。这样显然是不行的。

体现在项目中就是，后端并不能区分每个请求来自哪个用户。这样就会造成混乱，当然你可以要求前端每次请求都带上用户的账号密码，但这样就会导致页面刷新之后用户就要重新填写账号密码，而且会把账号密码明文保存在前端，这显然是不合适的。

于是为了防止这种偷钱行为，就出现了一些方式来弥补http的缺陷。

session

当一个账户首次访问服务器的时候，服务器会为这个账户分配一个session ID。之后每次访问网站的时候都会带上这个session ID。这样服务器就知道这个用户是谁了。过一段时间之后session ID就会过期。这时用户就需要重新登录来获取一个新的session ID。

一些与用户有关的属性信息会保存在session对象中（在后端）。

当你刷新、打开新页面时session ID都不会消失。这样可以保证用户的长期登录状态。

cookie

cookie是session的一个实现方式。

cookie是一个浏览器提供的可以保存信息的字段。session就可以保存在这里。然后前端每次向后端发起请求时都会带上这个cookie，这样后端就能识别账户状态了。

www.nvidia.cn

Cookie 是一个由字母和数字组成的小型数据文件，这些文件由网站存储在您上网时使用的设备上。Cookie 的用途多种多样，并且可能会与个人信息有所关联。

为什么英伟达会有这个提示，而多数网站很少见呢。因为英伟达比较注重用户隐私。

cookie可以理解为浏览器提供的一个用于存储信息的地方。你可以设置一个变量gsr，然后为这个变量设置一个值nb，然后每次前端向后端发送请求的时候，都会带上这个变量。然后后端就可以收到这个变量，然后后端就知道了gsr是nb。进而根据这个值做出相应的响应。

这就好比，我来给大家开会，我必须要带工牌，除非我偷到了gsr的工牌，不然移动的同学是不会vivo50的。

当然，除了关于账户信息外的其他信息也是可以保存在cookie中的。

cookie是保存在客户端的，就是在本地。所以理论上只要是保存在你本地的东西，你都是可以对其动手脚的。

给大家演示一下paper.io

这里我们通过对cookie的操作，使后端对我们的身份做出的错误判断。所以cookie中的字段是会直接影响后端决策的。

token

session其实是有一些问题的。

我们的服务端可能不是跑在一台机器上，如果有多台机器跑后端服务的话，前端发出的每个请求都有可能被任意一个服务端响应。如果是服务器A给客户端签发的session ID。当客户端拿着这个session ID再次发送请求的话，可能是由服务器B来进行响应的。但是这个session ID并不是服务器B签发的，所以服务器B没有保存这个session对象，并不知道这个用户的相关信息。这样session就失去了他应有的作用。

token的诞生解决了这个问题。同样的道理，当用户登录的时候，后端会为此用户生成一个数据，比如{userId:xxxx,password:xxxx}。然后对这个数据使用密钥进行加密，然后把密文发给前端，此后前端每次访问的时候，都要在请求头上带上这个密文，由于采用相同的加密算法和密钥，所以不论哪个服务器进行响应，都可以正确解析出用户信息。这样就解决了session的问题。这个密文就是token。

这个方案同时也解决了paper.io篡改数据的问题。因为数据是加密的，所以我不能对其动手脚。

localStorage

cookie的保存字段长度有限，一般只有4kb。

localStorage 是一个H5中提出的概念，提供了更大的存储空间（5MB）。并且即使你的浏览器重启，localstorage中的数据也不会丢失。

前端也可以对其进行操作。与cookie一样，他也是键值对的形式。

localStorage.setItem('gsr','nb');
localStorage.getItem('gsr');
localStorage.removeItem('gsr');
localStorage.clear();

sessionStorage

与localStorage类似，sessionStorage也可以保存一些信息。但是有一些区别。sessionStorage的数据只对某一个页面有效，切到其他页面的时候，在此页面中的sessionStorage就会失效。