「系统架构」如米乐体育APP官网何设计一个健壮高效的微信小程序登录方案

　　登录涉及的面比较多：触发场景上，各种页面各种交互路径都可能触发登录；交互过程上，既需要用户提供/证明id，也需要后端记录维护，还需要保证安全性；复用场景上，既是通用功能，需要多场景多页面甚至多小程序复用，又是定制功能，需要各场景/页面/小程序区分处理。要做到各种情形下都有良好的交互体验，且健壮、高效、可复用、可扩展、可维护，还是相对比较复杂的。

　　交互上，用户只需在微信的授权弹窗上点击确认，不需要输入账号密码等复杂操作；

　　要保证调用接口时后端session_key不失效，只能在每次调用前先使用wx.checkSession检查有效期或直接重新执行微信登录接口；

　　前端不能随便重新执行微信登录接口，可能导致正在进行的其它后端任务session_key失效；

　　此外，实践中发现，wx.checkSession平均耗时约需200ms，每次接口调用前都先检查一遍，开销还是蛮大的。

　　如何既保证接口功能正确有效，又不用每次耗费高额的查询开销，成为了一个问题。

　　调用数据接口时显式指明是否需要登录态，若需要则在接口调用前后自动加入登录态校验逻辑；

　　接口调用前只校验前端登录态，不校验后端登录态，也不校验微信登录态，以节省每次校验开销；

　　接口调用后校验后端及微信登录态，若后端返回登录态相关错误码，则重置前端登录态、重新登录、重新调用数据接口。

　　这样，只有在真正需要重新登录的时候（无前端登录态/后端登录态失效/后端被提示微信登录态失效）才会重新执行登录流程；并且，一旦需要重新登录，就会自动重新触发登录流程。

　　如上图所示，加入免并发逻辑：若登录流程正在进行，则不重复触发登录流程，而是加入当前流程的监听队列，待登录结束时再一并处理。这样，任一时刻最多只有一个登录流程正在进行。

　　如上图所示，目前登录流程已较为复杂，步骤较多，且大多是异步操作，每步成功失败需要区分处理，处理过程又会相互交织。如果直接在微信接口/网络接口提供的success/fail回调中进行逻辑处理，会造成：

　　如以上代码所示，微信登录、获取微信用户信息、提示授权、打开权限面板等每一步都是异步操作，都要等待success/fail回调才能获得操作结果并发起下一个操作；但利用Promise+async/await，可以像普通流程一样，将这些操作线性组合，顺序处理。

　　如以上代码所示，单独封装一个requestWithLogin函数，在数据请求前后加入登录态处理逻辑，可以保证数据请求会在有后端登录态时被发送/重新发送。

　　如以上代码所示，利用Promise可以被多次then/catch的特性（亦即，一个async函数调用结果可以被await多次），可以使用一个Promise来记录当前登录流程，后续调用直接对该Promise进行监听。

　　用户第一次授权时，开发者已经可以获得用户昵称、头像等用户信息和openid、unionid等用户标识；

　　如上图所示，在微信登录接口调用成功之后，先尝试直接根据openid完成登录过程，若失败再去请求用户授权。

　　有些场景，希望只在需要时自动登录，如商品详情页，希望在用户点击留言、收藏等按钮时自动调起登录并完成留言、收藏等相应操作；

　　场景优化方案主要是增加了一些流程&判断，使用上文中的“时序控制”基本可以解决。

　　如以上代码所示，将登录免并发改为每个公共步骤免并发，登录流程中就可以根据场景模式自由地进行步骤管理。

　　如以上代码所示，可以做到老用户/回归用户进入页面时自动悄悄登录，以提供更多个性化服务；新用户进入页面时不进行任何干扰，直到进行留言等操作时才自动出现授权弹窗，且授权完成后自动完成该次行为，无需用户再次操作。

　　如以上代码所示，虽然自定义浮层需要展示按钮、等待用户点击、处理点击、考虑用户不点击直接返回，交互流程相对复杂，但依然可以利用Promise使交互细节对外透明。打开浮层时返回一个Promise，在各个交互出口对Promise进行resolve，则使用时只需将其作为一个普通的异步过程对待。

　　如以上代码所示，虽然授权过程需要进行跨页面交互，但利用Promise和小程序代码包特性，可以在前一页面设置监听，登录页面进行回调。登录页面交互结束后，前一页面会自动继续执行登录流程，调用方无需进行返回刷新等额外处理，数据接口也会继续调用，用户无需再次操作。

　　这样，就可以实现在多个小程序间复用登录模块，由登录模块统一维护整体时序和默认流程，同时支持各小程序进行差异性定制&扩展。

　　这样，就可以实现所有页面共用登录模块的同时，支持每个页面进行定制化修改。

　　公共&默认流程统一维护，避免维护过程重复、分化、膨胀，减少整体维护成本，并降低各方迭代不及时风险；