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就会失效。

————————

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就会失效。