关键词：

一文搞懂web端登录过程

• 无状态HTTP协议
• session和cookie
• • cookie（存放在客户的浏览器上）
  • session （存放在服务器端）
  • session和cookie的区别
  • token
• 登录过程
• • token验证

在了解登陆过程的原理前，应该先弄清楚几个概念

无状态HTTP协议

协议就是两个计算机之间通讯需要遵守的规则，而HTTP协议是无状态的协议，当用户完成一次数据交互之后就会断开客户端和服务器之间的连接，无法进行数据跟踪。
用大白话来解释就是，比如说用户在网上把一个商品添加到购物车内，这就是一次数据交互，然后对话就会关闭，关闭之后你想第二次把商品添加到购物车内，服务器就找不到你应该添加到那个购物车内部了。这显然不是我们所需要的

session和cookie

cookie（存放在客户的浏览器上）

首先明确一点：cookie是由服务器颁发保存在客户端浏览器上的，下一次请求时浏览器会把cookie和请求的网址同时发送给服务器

大白话解释就是：cookie是一把钥匙，服务器是个锁头，这把要是也是服务器交到客户端手里的，只有一下次需要的时候拿着这把钥匙过来开锁，我才能把数据给你

cookie的主要内容包括：用户id、密码，过期时间，路径和域
Cookie 主要用于以下三个方面：

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

session （存放在服务器端）

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。其实，在用户和服务器第一次建立连接的时候，服务器就会自动生成一个sessionID保存在服务器中。
在cookie中提到过，cookie是由服务器颁发的，在颁发cookie中的过程中会把sessionID也颁发过去，事实上这个sessionID才是那把打开服务器的钥匙。浏览器在发起请求的时候会自动的把sessionID放在HTTP请求头中

• session的创建
  当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了sessionId，如果已包含则说明以前已经为此客户端创建过session，服务器就按照sessionId把这个session检索出来使用（检索不到，会新建一个），如果客户端请求不包含sessionId，则为此客户端创建一个session并且生成一个与此session相关联的sessionId，sessionId的值是一个既不会重复，又不容易被找到规律以仿造的字符串，这个sessionId将被在本次响应中返回给客户端保存。
  

session和cookie的区别

session和cookie的区别：

1. seesion保存在浏览器上，cookie保存在本地上
2. 存储时间不同，cookie存储的时间比较长，session存储时间较短随着客户端关闭就消失了，
3. 安全性不同，cookie是把账号密码存储在本地中，session是把信息存储在浏览器中，安全性session要远高于cookie
4. 存储的大小不同，单个cookie文件最大不超过4K，session要远超过cookie

token

首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给前端；token就是用户信息的钥匙，由后端服务器返回

登录过程

现如今登录过程一般可以分为两种，一种是通过token验证，另一种是通过session和cookie进行验证，现如今在前后端分离开发的过程中，基本都是使用token验证。在跨域的时候一般选择用token验证，不跨域的时候选择用session和cookie验证
本文将详细接受token验证

token验证

客户端在登录页面属于用户名和密码进行登录发送给服务器，服务器验证通过之后会生成针对于改用户的唯一的token值，客户端需要存储这个token值，（这个token值是代表了用户的登录状态），以后客户端每一次的请求都要携带该token，客户端验证该token是否存在。因为token只应该在当前网站打开的时候生效，所以应该将sessionStroage中存储。思路大题如下

1. 首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给客户端浏览器；
2. 前端拿到后端返回的 token ,存储在 localStorage 里；
3. 前端每次路由跳转，判断 localStorage有无 token ，没有则跳转到登录页，有则请求获取用户信息，改变登录状态；
4. 每次请求接口，在 Axios 请求头里携带 token;
5. 后端接口判断请求头有无 token，没有或者 token 过期，返回401；
6. 前端得到 401 状态码，重定向到登录页面。

//axios封装等这里就不在赘述，主要写上关键代码，res.data是从后端请求过来的数据
//把token值保存在sessionStorage中
window.sessionStorage.setItem("token",res.data.token);
//axios请求拦截器，在请求数据的时候把token放在请求头中
axios.interceptors.request.use(config => 
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
)

一文搞懂│mysql的语法操作命令从入门到精通(代码片段)

✨目录🎈初级语法之登录、库操作、表操作、数据操作，索引🎈高级语法之主键、试图、变量、流程、函数、存储过程🎈查询语法之联合查询、子查询、链接查询🎈初级语法之登录、库操作、表操作、数据... 查看详情

一文搞懂│mysql的语法操作命令从入门到精通(代码片段)

✨目录🎈初级语法之登录、库操作、表操作、数据操作，索引🎈高级语法之主键、试图、变量、流程、函数、存储过程🎈查询语法之联合查询、子查询、链接查询🎈初级语法之登录、库操作、表操作、数据... 查看详情

一文搞懂│mysql的语法操作命令从入门到精通(代码片段)

✨目录🎈初级语法之登录、库操作、表操作、数据操作，索引🎈高级语法之主键、试图、变量、流程、函数、存储过程🎈查询语法之联合查询、子查询、链接查询🎈初级语法之登录、库操作、表操作、数据... 查看详情

一文搞懂js-web-api——dom(代码片段)

介绍本章介绍DOM操作的知识点和题目。包括DOM结构，常用DOM操作，DOM性能优化等。DOM是网页结构的基础，学会DOM操作才可以做网页开发。主要内容从JS基础到JS-Web-APIDOM的本质是什么DOM节点操作DOM结构操作如何优化DOM操... 查看详情

一文搞懂redis(代码片段)

简介：NoSQL泛指非关系型数据库，随着web2.0互联网的诞生，传统的关系型数据库很难对付web2.0大数据时代！尤其是超大规模的高并发的社区，暴露出来很多难以克服的问题，NoSQL在当今大数据环境下发展的... 查看详情

一文搞懂rpc原理(代码片段)

RPC原理解析什么是RPCRPC(RemoteProcedureCallProtocol)——远程过程调用协议，它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在，如TCP/IP或UDP，为通信程序之间携带信... 查看详情

一文搞懂跨域问题(代码片段)

一文搞懂跨域问题同源策略跨域解决跨域办法同源策略是浏览器的一个安全策略，保证浏览器的安全运行，要求网页中的协议名，域名和端口号要完全一致，跨域违背了同源策略就会产生跨域，比如说在百度... 查看详情

cas和aqs一文搞懂(代码片段)

JAVA多线程，面试官喜欢问的东西一些概念的东西原子性就是指该操作是不可再分的。不论是多核还是单核，具有原子性的量，同一时刻只能有一个线程来对它进行操作。简而言之，在整个操作过程中不会被线程调... 查看详情

一文搞懂跨域问题(代码片段)

一文搞懂跨域问题同源策略跨域解决跨域办法同源策略是浏览器的一个安全策略，保证浏览器的安全运行，要求网页中的协议名，域名和端口号要完全一致，跨域违背了同源策略就会产生跨域，比如说在百度... 查看详情

一文带你搞懂内存泄漏！！！(代码片段)

好文推荐：作者：codelang检测内存是否泄漏非常简单，只要在任意位置调用Debug.dumpHprofData(file)即可，通过拿到hprof文件进行分析就可以知道哪里产生了泄漏，但dump的过程会suspend所有的java线程，导致用户界... 查看详情

一文搞懂全排列组合子集问题(建议收藏)(代码片段)

前言Hello，大家好，我是bigsai，longtimenosee！在刷题和面试过程中，我们经常遇到一些排列组合类的问题，而全排列、组合、子集等问题更是非常经典问题。本篇文章就带你彻底搞懂全排列！求全排列？全排列即：n个元素取n个元... 查看详情

一文搞懂知识蒸馏knowledgedistillation算法原理(代码片段)

知识蒸馏算法原理精讲文章目录知识蒸馏算法原理精讲1.什么是知识蒸馏？2.轻量化网络的方式有哪些？3.为什么要进行知识蒸馏？3.1提升模型精度3.2降低模型时延，压缩网络参数3.3标签之间的域迁移4.知识蒸馏的... 查看详情

一文搞懂i2c总线通信(代码片段)

目录1、简介2、物理特性3、通讯时序3.1、开始和停止条件3.2、地址传送3.3、数据传送3.4、总线应答3.5、总线仲裁4、工作过程4.1、单个主设备连接多个从机4.2、多个主设备连接多个从机 本来不打算写这篇文章，因为网上关于I... 查看详情

javascript中的浅拷贝深拷贝是什么？一文带你搞懂，不再犯错(代码片段)

⭐️本文首发自前端修罗场，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、模拟面试、简历修改、Web3、区块链以及职业发展。创作的《前端面试复习笔记》（点击阅读原文订阅），广受好评&... 查看详情

一文搞懂│mysql的语法操作命令从入门到精通(代码片段)

✨目录🎈初级语法之登录、库操作、表操作、数据操作，索引🎈高级语法之主键、试图、变量、流程、函数、存储过程🎈查询语法之联合查询、子查询、链接查询🎈初级语法之登录、库操作、表操作、数据... 查看详情

spark3aqe(adaptivequeryexecution)一文搞懂新特性(代码片段)

Spark3AQE(AdaptiveQueryExecution)序在搭建平台的过程中，我们使用CDH6.3.2进行搭建，但CDH中阉割掉了spark-sql功能，所以我们外挂了Spark3，补充spark-sql功能，版本为3.3。在使用的过程中，查看sql执行图，发现了... 查看详情

http/https一文搞懂(代码片段)

HTTP协议（HyperTextTransferProtocol，超文本传输协议）：是一种发布和接收HTML页面的方法。HTTPS（HypertextTransferProtocoloverSecureSocketLayer）简单讲是HTTP的安全版，在HTTP下加入SSL层。SSL（S 查看详情

http/https一文搞懂(代码片段)

HTTP协议（HyperTextTransferProtocol，超文本传输协议）：是一种发布和接收HTML页面的方法。HTTPS（HypertextTransferProtocoloverSecureSocketLayer）简单讲是HTTP的安全版，在HTTP下加入SSL层。SSL（S 查看详情