小程序静默登录-登录拦截实现方案【全局loginPromis加页面拦截】

news/2024/7/20 2:20:48 标签: 小程序

实现效果:

用户进入小程序访问所有页面运行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);
};

代码片段

https://developers.weixin.qq.com/s/QbGqfwmR7pNH

参考文章:
如何保证小程序的每个页面,在执行页面周期时,都是已登录

按照参考文章写代码的时候发现了一个问题:里面用的发布订阅模式在使用时,先得在页面订阅,在app.js里的onLauch或onShow执行完后发布后,页面onLoad、onShow、onReady函数里可能还未进行订阅,这时这种方案就有问题。最后采用了参考文章里的页面劫持方案和全局loginPromise的方式完成了登录页面拦截的实现方案。
最后: 感谢参考文章的作者大大,给了我们一个页面劫持的方案


http://www.niftyadmin.cn/n/5271254.html

相关文章

【机器学习】梯度下降法:从底层手写实现线性回归

【机器学习】Building-Linear-Regression-from-Scratch 线性回归 Linear Regression0. 数据的导入与相关预处理0.工具函数1. 批量梯度下降法 Batch Gradient Descent2. 小批量梯度下降法 Mini Batch Gradient Descent(在批量方面进行了改进)3. 自适应梯度…

秋招上岸记录咕咕咕了。

思考了一下,感觉并没有单独写这样一篇博客的必要。 能够写出来的,一些可能会对人有帮助的东西都做进了视频里面,未来会在blbl发布,目前剪辑正在施工中(?) 另外就是,那个视频里面使…

YOLOv5改进 | 卷积篇 | SPD-Conv空间深度转换卷积(高效空间编码技术)

一、本文介绍 本文给大家带来的改进内容是SPD-Conv(空间深度转换卷积)技术。SPD-Conv是一种创新的空间编码技术,它通过更有效地处理图像数据来改善深度学习模型的表现。SPD-Conv的基本概念:它是一种将图像空间信息转换为深度信息…

京东体育用品销售数据分析与可视化系统

京东体育用品销售数据分析与可视化系统 前言数据爬取模块1. 数据爬取2. 数据处理3. 数据存储 数据可视化模块1. 数据查看2. 店铺商品数量排行3. 整体好评率4. 不同品牌市场占比5. 品牌差评率排名6. 品牌价格排名7. 品牌评论数量分布 创新点 前言 在体育用品行业,了…

AutoJs学习-某点阅读自动签到任务脚本

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列

【python并发任务的几种方式】

文章目录 1 Process:2 Thread:3 ThreadPoolExecutor:4 各种方式的优缺点:5 线程与进程的结束方式5.1 线程结束的几种方式5.2 进程的结束方式 6 应用场景效率对比 在Python中,有几种方法可以处理并行执行任务。其中,Process、Thread和ThreadPo…

饥荒Mod 开发(十):制作一把AOE武器

饥荒Mod 开发(九):物品栏排列 饥荒Mod 开发(十一):修改物品堆叠 前面的文章介绍了很多基础知识以及如何制作一个物品,这次制作一把武器,装备之后可以用来攻击怪物。 制作武器贴图和动画 1.1 制作贴图。 先准备一张武器的贴图&a…

springboot(ssm儿童慈善管理系统 儿童捐赠平台 Java系统

springboot(ssm儿童慈善管理系统 儿童捐赠平台 Java系统 开发语言:Java 框架:ssm/springboot vue JDK版本:JDK1.8(或11) 服务器:tomcat 数据库:mysql 5.7(或8.0) 数…