前端设计中应该了解的web登录。

当时做登录这块的时候,被session、cookie、token各种概念差点整蒙圈了,上网查询相关概念,发现很多人都是类似的疑惑,比如:

前端应该知道的web登录

前端应该知道的web登录

前端应该知道的web登录

前端应该知道的web登录

来了字节跳动之后,前端很少接触HTTP请求之后的事情,而且登录相关的SDK封装的很好,所以这篇文章就简单的学习记录一下。

为什么会有登录这回事

首先这是因为HTTP是无状态的协议,所谓无状态就是在两次请求之间服务器并不会保存任何的数据,相当于你和一个人说一句话之后他就把你忘掉了。所以,登录就是用某种方法让服务器在多次请求之间能够识别出你,而不是每次发请求都得带上用户名密码这样的识别身份的信息。 从登录成功到登出的这个过程,服务器一直维护了一个可以识别出用户信息的数据结构,广义上来说,这个过程就叫做session,也就是保持了一个会话。

常见的两种登录

忽然想到一点,看了网上很多问题,我觉得大家应该区分两个概念:广义的session和狭义的session

广义的session:广义的session就是从登录成功到登出的过程,在这个过程中客户端和服务器端维持了保持登录的状态,至于具体怎么维持住这种登录的状态,没有要求。

狭义的session:狭义的session就是登录成功后,服务器端存储了一些必须的用户信息,这部分存在服务器端的用户信息就叫做session,也就是接下来要说的第一种登录的实现方式。

服务器session+客户端sessionId

先用图来看:

前端应该知道的web登录

详细说的说一下,这里面主要是这么几个过程:

  1. 客户端带着用户名和密码去访问 /login 接口,服务器端收到后校验用户名和密码,校验正确就会在服务器端存储一个sessionId和session的映射关系

前端应该知道的web登录

2.服务器端返回response,并且将sessionId以set-cookie的方式种在客户端,这样一来,sessionId就存在了客户端。这里要注意的是,将sessionId存在cookie并不是一种强制的方案,而是大家一般都这么做,而且发请求的时候符合domain和path的时候,会自动带上cookie,省去了手动塞的过程。

3.客户端发起非登录请求时,服务端通过cookie中的sessionId找到对应的session来知道此次请求是谁发出的。

token

前面说到sessionId的方式本质是把用户状态信息维护在server端,token的方式就是把用户的状态信息加密成一串token传给前端,然后每次发请求时把token带上,传回给服务器端;服务器端收到请求之后,解析token并且验证相关信息;

所以跟第一种登录方式最本质的区别是:通过解析token的计算时间换取了session的存储空间

业界通用的加密方式是jwt(json web token),jwt的具体格式如图:

前端应该知道的web登录

简单的介绍一下jwt,它主要由3部分组成:

header里面描述加密算法和token的类型,类型一般都是JWT;

payload里面放的是用户的信息,也就是第一种登录方式中需要维护在服务器端session中的信息;

signature是对前两部分的签名,也可以理解为加密;实现需要一个密钥(secret),这个secret只有服务器才知道,然后使用header里面的算法按照如下方法来加密:

总之,最后的 jwt = base64url(header) + \".\" + base64url(payload) + \".\" + signature

jwt可以放在response中返回,也可以放在cookie中返回,这都是具体的返回方式,并不重要。

客户端发起请求时,官方推荐放在HTTP header中:

这样子确实也可以解决cookie跨域的问题,不过具体放在哪儿还是根据业务场景来定,并没有一定之规。

两种登录方案存在的问题

session方式

  1. session方式由于会在服务器端维护session信息,单机还好说,如果是多机的话,服务器之间需要同步session信息,服务横向扩展不方便。
  2. session数量随着登录用户的增多而增多,存储会增加很多。
  3. session+cookie里面存sessionId的方式可能会有csrf攻击的问题,常见的方式是使用csrf_token来解决

jwt方式

  1. jwt的过期时间需要结合业务做设置,而且jwt一旦派发出去,后端无法强行使其作废

后话

理清概念,一身轻松

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/48466.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
优化家优化家订阅用户
上一篇 2022年7月4日 01:52
下一篇 2022年7月4日 01:52

相关推荐

  • 小编分享怎么查看css冲突,css冲突怎么解决的问题。

    CSS冲突是指在网页开发过程中,由于多个样式表或者样式规则的相互影响,导致页面元素的样式表现不一致的现象,这种现象可能会使得页面的布局和设计变得混乱,影响用户体验,本文将介绍如何查看和解决CSS冲突,以及…

    2024年7月4日
    00
  • 百度知道答案受限的六个解决办法

    百度知道问答坚持做到现在2年时间了,手里常用的有两个号,一个是13级的机构行家号,另外一个是10级的个人机构号。强烈不推荐企业采用小号批量提问,回答的方式。90%做的问题都是无用功,不如稳扎稳打做企业本身的…

    2022年5月26日 SEO操作
    0653
  • 我来教你seo中title标签优化技巧有哪些。

    title标签优化,虽然title标签优化已成为一个老话题。但还是有必要谈谈seo中title标签的优化。从title一词意思来看,也就是说title是一个网站的主旨。所以要做好title标签优化。那么title标签优化有哪些技巧可言?一…

    2023年6月29日
    00
  • 今日分享html如何用标签加入图片和文字。

    在HTML中,我们可以使用<img>标签来插入图片,以下是详细的技术教学: (图片来源网络,侵删) 1、打开一个文本编辑器(如Notepad++、Sublime Text等)或在线HTML编辑器(如CodePen、JSFiddle等)。 2、创建…

    2024年6月25日
    00
  • html怎么让ul内容居中。

    在HTML中,<ul>标签用于创建一个无序列表,默认情况下,无序列表中的每一项都会显示在新的一行上,如果你想让无序列表中的每一项都显示在同一行,你可以使用CSS来实现这个效果。 (图片来源网络,侵删) 以下…

    2024年6月25日
    01
  • 企业APP和移动网站,应该怎样选择。

    很明显,公司越来越意识到他们需要采用移动战略这一事实。 不仅仅是移动互联网用户的数量超过仅限桌面,但应用程序的使用量也超过了桌面使用量。由于这种转变,公司正在重新考虑他们的移动战略。然而,他们一直在努…

    2022年7月3日 建站资讯
    0117
  • 企业网站也需要看颜值。

    有很多客户会有这种疑惑,为什么我的企业网站用户访问的时间往往很短,只是匆匆一瞥,甚至完全没有咨询的意愿?排除用户误操作等客观因素,网站用户转化率不高的首要原因就是网站给用户带来的第一印象不好。 当下是…

    2022年7月4日 建站资讯
    0225
  • 关于html如何设置背景图片的大小。

    要在HTML中设置背景图片的大小,可以使用CSS样式来实现,下面是详细的技术教学: (图片来源网络,侵删) 1、了解HTML和CSS的基本概念: HTML(HyperText Markup Language)是用于创建网页内容的标准标记语言。 CSS…

    2024年6月21日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息