2024-08-03-【小程序】小程序静默登录方案优化

一、现状

通过扫码进入个人中心页，后台异步执行静默登录后，个人中心页未监听全局登录数据已更新，导致页面未及时刷新。

添加监听修复该问题后，产生新的问题，通过扫码进入个人中心页，点击“退出登录”后，首页界面未更新为未登录态。

注：小程序静默登录常规做法，仅对缓存数据中有登录数据的情况进行登录态还原，不做接口调用的异步登录，让用户手动登录。

小程序登录整体流程
image.png

小程序前端静默登录流程
image.png

二、问题原因排查

当前静默登录（后台异步登录），由于页面监听方案为 Object.defineProperty 且 configurable 设为 true，可重复配置，当多次监劫持全局变量同一属性时前者将被覆盖，导致页面后台运行（hide）情况下无法正常监听登录数据变更。

三、静默登录 前端可选方案

Object.defineProperty/Proxy（当前方案）

自定义发布订阅模式

过渡页

路由拦截

监听涉及页面
首页、个人中心、查看金额、入驻页。

image.png

全局实现 劫持全局变量更新的监听方法（app.js）
image.png

页面监听 全局变量更新
image.png

四、现有方案 Object.defineProperty/Proxy 优化

由于多次监听同一个全局变量存在覆盖问题，可将同一全局变量的监听改为方法数组，从而达到多次监听的目的。但应考虑多个监听带来的副作用，完善解除方法与解除监听的时机。
image.png

由于监听登录数据存在可复用性，首页及个人中心页登录场景几乎相同，可考虑采用 behavaior 提取可复用逻辑。
image.png

五、现有方案 存在的其他 BUG
扫码查看金额 => 进入个人页 => 退出登录 => 重新扫描查看金额，接口报错并跳转到首页

扫码进入个人中心页，页面登录态未刷新；（添加 watch 已修复，但引出新 bug，搜索进入首页后打开个人中心页，退出登录）