VUE组件间传值的方式总结与localStorage + sessionStorage详解+cookie+session+token

1.props 父组件向子组件传值 子组件绑定父组件属性 子组件内部声明使用
2.$emit/$on 子组件向父组件传值（通过事件形式） 子组件绑定父组件方法 子组件触发父组件
3.vuex 全局传值 可用于同级组件
4.EventBus 可用于同级组件
4.url传参 route跳转时将参数存在url中供下一页面使用
5.$attrs/$listeners
6.$parent / $children

localStorage

：H5新增的本地存储API，可以理解为浏览器的本地数据库，大小只有5M
对应的CRUD方法：

• setItem 对应增加修改；
• getItem、key相当于查找；
• removeItem、clear相当于删除；

生命周期：永久有效
vuex 存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态。具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。

sessionStorage

生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。但刷新不会。
SessionStorage 和 LocalStorage 是浏览器提供的两种数据存储机制，两者最主要的区别在于生命周期不同

Token和session cookie

Session

session 从字面上讲，就是会话。
因为HTTP请求是无状态的，所以想出的办法就是给大家发一个会话标识(session id), 说白了就是一个随机的字串，每个人收到的都不一样。sessionid会通过cookie来保存和传输

Token

暗号，令牌

使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的：

1.客户端使用用户名跟密码请求登录

2.服务端收到请求，去验证用户名与密码

3.验证通过，程序返回一个签名的token 给客户端。

4.客户端储存token，比如放在 Cookie 里或者 Local Storage 里，并且每次用于每次发送请求。

5.服务端验证token并返回数据。

Cookie

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

用户请求登录 -> 服务器验证通过签发cookie包含sessionID发送给浏览器，同时自己保存会话session -> 浏览器接收到cookie保存在本地 -> 下次登录相同域名时时将cookie中的信息发送给服务器

这篇文章写的很不错，对理解帮助很大

基于cookie的身份验证

cookie是源自站点并由浏览器存储在客户计算机上的简单文件。它们通常包含一个名称和一个值，用于将客户端标识为对站点具有特定许可权的特定用户。

cookie与源域相连接的方式可以确保仅源域能够访问其中存储的信息。第三方服务器既不能读取也不能更改用户计算机上该域的cookie内容。

网景公司的前雇员于1993年发明了cookie。

基于cookie的验证是有状态的，就是说验证或者会话信息必须同时在客户端和服务端保存。这个信息服务端一般在数据库中记录，而前端会保存在cookie中。

验证的一般流程如下：

用户输入登陆凭据；
服务器验证凭据是否正确，并创建会话，然后把会话数据存储在数据库中；
具有会话id的cookie被放置在用户浏览器中；
在后续请求中，服务器会根据数据库验证会话id，如果验证通过，则继续处理；
一旦用户登出，服务端和客户端同时销毁该会话。

基于token的身份验证

随着单页面应用程序的流行，以及Web API和物联网的兴起，基于token的身份机制越来越被大家广泛采用。

当讨论基于token的身份验证时，一般都是说的JSON Web Tokens（JWT）。虽然有着很多不同的方式实现token，但是JWT已经成为了事实上的标准，所以后面会将JWT和token混用。

基于token的验证是无状态的。服务器不记录哪些用户已登陆或者已经发布了哪些JWT。对服务器的每个请求都需要带上验证请求的token。该标记既可以加在header中，可以在POST请求的主体中发送，也可以作为查询参数发送。

工作流程如下：

用户输入登陆凭据；
服务器验证凭据是否正确，然后返回一个经过签名的token；
客户端负责存储token，可以存在local storage，或者cookie中；
对服务器的请求带上这个token；
服务器对JWT进行解码，如果token有效，则处理该请求；
一旦用户登出，客户端销毁token。

token相对cookie的优势:

• 支持跨域访问
• 无状态
• 防跨站请求伪造（CSRF）
• 多站点使用
• 支持移动平台
• 性能
• JWT

总结：
session存于服务器，理解为一个状态列表，拥有一个唯一识别符号sessionId，存放于cookie中。服务器收到cookie后解析出sessionId，再去session列表中查找，才能找到相应session。依赖cookie
cookie类似一个令牌，装有sessionId，存储在客户端，浏览器通常会自动添加。
token也类似一个令牌，无状态，用户信息都被加密到token中，服务器收到token后解密就可知道是哪个用户。需要开发者手动添加。

session因为跨域请求、服务器资源开销等原因,Token应运而生
基于Token的身份验证是无状态的，我们不将用户信息存在服务器或Session中。　　
NoSession意味着你的程序可以根据需要去增减机器，而不用去担心用户是否登录。每次接收请求时验证token即可。

可用库：

js-cookie
在浏览器中直接查看cookie：

document.cookie.split("; ");