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("; ");
|