IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> VUE组件间传值的方式总结与localStorage + sessionStorage详解+cookie+session+token -> 正文阅读

[JavaScript知识库]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("; ");

在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-25 08:01:50  更:2021-11-25 08:01:55 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 5:20:07-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码