小程序静默登录-登录拦截实现方案全局loginPromis加页面拦截
目录
小程序静默登录-登录拦截实现方案【全局loginPromis加页面拦截】
实现效果：
用户进入小程序访问所有页面运行onload、onShow、onReady函数时保证业务登录态是有效的
实现难点：
由于小程序的启动流程中，页面级和组件级的生命周期函数都不支持异步阻塞；因此会造成一个情况，app.onLaunch或者app.onShow中发起的wx.login还没有成功的时候，页面级的生命周期函数已经向服务器发起了请求。由于我们的接口设计大部分都是需要验证的，此时登录还未成功，token也还没有正确返回，因此页面级的生命周期发起的数据获取接口肯定是会报错的（例如返回了401）
这样子的话每个页面都需要加登录判断，维护难度很大。
解决思路：
挟持Page并使用全局loginPromise形式，可保障任意页面执行onload、onShow、onReady函数前保证业务登录态的有效。无登录态或者登录态失效时先await等待全局loginPromise推向resolve后，才释放页面的onload、onShow、onReady函数的执行。下面用wps画的小程序登录流程流程图：
流程图应该是很明白了，直接上代码：
// app.js
import './utils/login-intercept';
App({
globalData: {
loginPro: null,
},
onLaunch() {},
onShow() {
this.checkLoginStatus();
},
async checkLoginStatus() {
this.globalData.loginPro = new Promise((resolve) => {
setTimeout(() => {
// 模拟登录需要三秒 如果之前有业务登录态且业务登录态有效那么直接resolve
resolve('login Status is valid!');
}, 3000);
});
},
});// utils/login-intercept.js
// 页面扩展
const oldPage = Page;
Page = function (pageParams) {
const { onLoad, onShow, onReady } = pageParams;
pageParams.onLoad = async function (params) {
await getApp().globalData.loginPro;
onLoad && onLoad.call(this, params);
};
pageParams.onShow = async function () {
await getApp().globalData.loginPro;
onShow && onShow.call(this);
};
pageParams.onReady = async function () {
await getApp().globalData.loginPro;
onReady && onReady.call(this);
};
return oldPage(pageParams);
};代码片段
参考文章：
按照参考文章写代码的时候发现了一个问题：里面用的发布订阅模式在使用时，先得在页面订阅，在 app.js 里的 onLauch 或 onShow 执行完后发布后，页面 onLoad、onShow、onReady 函数里可能还未进行订阅，这时这种方案就有问题。最后采用了参考文章里的页面劫持方案和全局 loginPromise 的方式完成了登录页面拦截的实现方案。
最后： 感谢参考文章的作者大大，给了我们一个页面劫持的方案