背景

昨天❤️⭕️哥面试拷打，场景如title，大家时间都很珍贵，不多废话，直接开始

扫码登录流程梳理（前端er角度）

首先我们在网页端应用内点击登录后，登录页就会展示一个二维码，这个二维码是我们向后端请求得来的。客户端轮询后端来二维码状态，服务端以响应的形式告知客户端二维码的状态从而客户端作出对应的处理：

• 情况一：如果客户端是首次请求二维码信息，那么后端肯定需要返回二维码生成相关的信息，前端根据这个信息去生成二维码进行展示。并且后端对这个二维码的信息进行保存，以便前端后续查询时后端进行反馈。

• 情况二：客户端非首次请求二维码信息，则后端检查二维码信息，如果二维码处于普通状态，所谓普通状态也就是从二维码生成后用户没有任何操作，并且二维码也没有过期，后端就无需返回啥信息，客户端收到响应后也无需任何操作，继续下一次轮询即可。

• 情况三：接收前端请求后，后端检查如果二维码处于过期状态，那么再次返回新的二维码信息并在数据库中记录（同情况一）

• 情况四：

  • 在客户端查询之前，用户扫描二维码，首先肯定是移动端携带着用户信息进行网络请求（我们移动端扫码时肯定移动端app是登录状态呐，携带用户信息是必然的，也是扫码授权的合理性保障），进而触发服务端对二维码数据的修改，如修改二维码为扫描成功状态，具体的表现比如生成token等，这个token就是为pc端准备的。
  • 客户端查询，服务端响应token等权限标识。
  • 客户端判断登录成功后，携带token正常请求数据即可。

说白了，以前用账号密码去讨token，现在改成扫二维码讨token了呗。

对稀土掘金的扫码登录进行观察

对稀土掘金扫码登录的一些表象进行观察以验证上面的文字

首先，如下是非登陆状态，并且清空了网络请求记录：

点击登录，观察网络请求如下（图中list请求为鼠标悬浮登录按钮自动触发）：

查看响应的数据，会发现点击登录后的第一个二维码请求的响应体中qrcode字段是有值的（qrcode是一个生成二维码的js库，由此推测这个字段就是二维码相关），而往后的二维码请求的响应没有携带任何数据，直至二维码过期后的下一个请求，又重新携带了数据，如下为携带数据的响应（第一个请求）与不携带数据的响应：

第一次请求：

后续请求：

下面是我扫码登录后的情况，还是同样的?next=...这个“二维码相关请求”

为了验证扫码成功后的响应究竟做了什么（是不是返回了pc端鉴权信息），我再重新扫码登录一次，并对扫码前后的一些状态进行截图。

首先清除所有localStorage里存放的信息和cookie：

接下来扫码登录，啥也不说了兄弟们，看图吧：

最后

今天一天也是花了一天时间看了n个视频和文章，但是大多数文章都是从后端er的角度，或者说是前端er尽可能的去贴近后端人员的形式去详细剖析整个流程的细节，比如请求哪个服务器，用的什么数据库，传递什么信息啦等等。本人看的过程中由于后端水平的欠缺也是看的相当痛苦。但是呢，我认为作为一个前端面试时常见的设计题目，把握一个宏观的流程才是重要的，跟面试官具体聊到哪一部分时如果有必要的话再展开说。

总结一下，如果实现一个demo级别的扫码登录，我们前端要做的事情无非就一件：轮询二维码的状态并作出对应的处理。

立的刷题flag已经鸽了三天了。也不是摆烂，是真没时间，总被一些奇奇怪怪的点吸引，又或者上班赶需求...，这不今天为了跟大家分享扫码登录这事情又写文章到这个点...。不bb了，摊牌了，我是来要👍的😄，如果有帮助请掘友们给个点赞鼓励一下吧！