微信扫码登录是很常见的技术，曾经在一次面试当中，面试官就曾问过微信扫码登录的实现思路，这次，以微信读书网页版扫码登录为例子，聊聊我对它技术实现思路一些思考。
打开网页版微信读书，打开F12准备随时观察http连接状况，这时点击登录，会弹出一个二维码：
这时，可以看到，在二维码弹出来的时候，前端调用了后端两个接口，一个是getuid，一个是getinfo，这里面涉及到哪些逻辑实现呢？
稍微思考一下，其实很好理解，每个随机生成的二维码，其实都是一个uuid码，也就是说，在点击登录的时候，会执行一个getuid()方法，该方法调用后端API：web/login/getuid会返回一个随机生成的uuid码，这个uuid码返回到前端上时，以二维码的形式展示。
点击getuid()，可看到该方法返回一个随机生成的uuid:38e673a9-5bd3-4f0c-ba2f-62ab376372a9
与此同时，还调用了另一个getinfo()方法，这应该是getuid调用成功后的回调方法，也就是当getuid()执行成功后，得到一个uid时，就立马调用getinfo()方法，同时将生成的uid当做参数传给getinfo()，让其去访问后端API。
当没有用手机微信进行扫码操作时，会看到getinfo()一直没有返回值，可见，它一直在做轮询操作，在某段时间内，若没有轮询成功，就会断开连接，接口调用失败。
到这里，可以简单归纳下生成二维码流程，即，在点击登录时，会调用getuid()方法调用后端API接口“web/login/getuid”，将随机返回一个唯一uid，这时会将参数传给回调方法getinfo({"uid":"38e673a9-5bd3-4f0c-ba2f-62ab376372a9"})，该方法会将uid参数传给后端API接口“web/login/getinfo”，这时，将一直做轮询将uid去redis查询，若能查询成功，即登录成功，反之，连接超时失败。
下面用两段伪代码来说明下大概代码逻辑：
一.前端React.js获取uuid并回调给getinfo()伪代码：
1 export const getuid=(params={},queue='getuid')=>dispatch=>{ 2 http.post({ 3 url:'https://weread.qq.com/web/login/getuid', 4 params:params, 5 queue:queue, 6 callback:(res)=>{ 7 //getuid方法执行成功，返回{uid: "38e673a9-5bd3-4f0c-ba2f-62ab376372a9"}，回调getinfo() 8 dispatch(getinfo({uid:res.uid})) 9 } 10 }); 11 } 12 13 export const getinfo=(params={},queue='getinfo')=>dispatch=>{ 14 http.get({ 15 url:'https://weread.qq.com/web/login/getinfo', 16 params:params, 17 queue:queue, 18 callback:(res)=>{ 19 //若登录成功，应该重定向到已登录状态的主页 20 } 21 }); 22 }