系统设计：扫码登录流程，5个流程图告诉你！

背景说明

扫码登陆是我们在各种应用系统中最常见的逻辑之一，即使是公司后端系统也非常常见，例如我们的系统与企业微信进行绑定，需要用户扫描后自动登陆自己的工号进入系统。

操作流程

系统执行流程

为了更加便于说明和理解，我们将扫码登陆的流程分为两大部分进行阐述

• 前端处理流程
  • 请求二维码流程
  • 判断二维码的状态
  • 跳转登录
• 后端处理流程
  • 生成二维码流程
  • 确认登陆流程

流程图说明

前端处理流程：

1. 扫码的前提是手机端已经登陆了账号
2. 前端（PC）请求后端，如果成功接收唯一ID，二维码信息（二维码图片，或者base64编码）则进行展示并执行第3步，否则显示请求失败并结束流程
3. 前端（PC）启动轮询（setTimeout）：带着唯一ID信息开启一个轮询请求，实现逻辑如下：
   • 如果接收到已过期标识，结束轮询，并展示：二维码已失效，点击刷新；在点击后回到第1步；
   • 如果接受到等待则进行下一次轮询；
   • 如果接收到token信息则成功登陆，跳转进入系统。

后端处理流程：

查询二维码状态流程

1. 接收到前端请求二维码，生成二维码信息（返回图片流或者base64编码）将二维码的唯一ID、状态存放在redis中，并设置一定的有效期；
2. 后端接收到网页端的查询请求，会进行下列判断二维码状态的逻辑：
   • 已过期，返回过期标识
   • 等待中或已扫描，返回等待/已扫描标识
   • 已确认，返回用户token

扫码流程

1. 接收用户ID和二维码ID
2. 校验二维码状态，会进行下列逻辑：
   • 已过期，返回过期标识
   • 等待中，绑定用户ID，修改二维码状态更新到redis
   • 已扫描或已确认，返回二维码已被扫描，请刷新后重试

确认登陆流程

1. 更新redis中二维码的sessionID和状态为：已确认
2. 生成PC端的token并返回

写在最后

• 结构化表达的重要性：一开始是根据文字的描述画了一整个流程图，发现怎么都画不明白，梳理不清楚；然后发现应该将前后端分开绘制才比较清晰。
• 分享促进思考：想着这么一段梳理，得放到博客上让大家瞧瞧呀，但是放上来只简单的罗列几张图又太敷衍大家了，于是我又每个流程图配了一段文字作为说明，才发现了其中也存在一些问题，从而又进行了流程图的修改。

在此感谢大家的激励让我对这块流程设计更清晰，当然如果你发现了其中存在哪些不足也可以留下你的指点哈！