小程序静默登录-登录拦截实现方案【全局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(() => {// 模拟登录需要三秒 如果之前有业务登录态且业务登录态有效那么直接resolveresolve('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.hqwc.cn/news/283468.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙Web组件_学习

Web组件概述 Web组件用于在应用程序中显示Web页面内容,为开发者提供页面加载、页面交互、页面调试等能力。 页面加载:Web组件提供基础的前端页面加载的能力,包括加载网络页面、本地页面、Html格式文本数据。页面交互:Web组件提供…

展示一段比较简单的人工智能自动做模型的程序

人工智能是一种模拟或模仿人类智能的技术。它通过使计算机系统具有一定的认知能力和学习能力,使其能够自动完成一系列复杂的任务。人工智能可以在各个领域应用,包括图像识别、语音识别、自然语言处理、机器学习等。人工智能还可以用于解决各种问题&#…

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《市场环境下考虑全周期经济效益的工业园区共享储能优化配置》

这个标题涉及到工业园区中共享储能系统的优化配置,考虑了市场环境和全周期经济效益。以下是对标题中各个要素的解读: 市场环境下: 指的是工业园区所处的商业和经济背景。这可能包括市场竞争状况、电力市场价格波动、政策法规等因素。在这一环…

高通平台开发系列讲解(AI篇)SNPE工作流程介绍

文章目录 一、转换网络模型二、量化2.1、选择量化或非量化模型2.2、使用离线TensorFlow或Caffe模型2.3、使用非量化DLC初始化SNPE2.4、使用量化DLC初始化SNPE三、准备输入数据四、运行加载网络沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要介绍SNPE模型工作…

前端之HTML

一.网页及HTML 1.1网页 1.网页是构成网站的基本元素,通常是由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页以.htm或.html后缀结尾的文件,俗称为HTML文件。 2.网站是网页的集合,网页通常是通过浏览器来阅读的HTML格式的文件…

Redis - RDB与AOF持久化技术

Redis 持久化技术 RDB 是默认持久化方式,但 Redis 允许 RDB 与 AOF 两种持久化技术同时 开启,此时系统会使用 AOF 方式做持久化,即 AOF 持久化技术的优先级要更高。同样的道 理,两种技术同时开启状态下,系…

neuq-acm预备队训练week 9 P1119 灾后重建

解题思路 本题可以用最短路算法——Floyd AC代码 #include<bits/stdc.h> #define inf 1e9 using namespace std; const int N 2e2 50; int n, m, q, now 0, a, b, c, t[N], G[N][N];int main() {scanf("%d%d", &n, &m);for(int i 0;i<n;i)sc…

弹性网络优化算法

3.3、Elastic-Net算法使用 这是scikit-learn官网给出的弹性网络回归的&#xff0c;损失函数公式&#xff0c;注意&#xff0c;它用的矩阵表示&#xff0c;里面用到范数运算。 min ⁡ w 1 2 n samples ∣ ∣ X w − y ∣ ∣ 2 2 α ρ ∣ ∣ w ∣ ∣ 1 α ( 1 − ρ ) 2 ∣ ∣…

FPGA实现 TCP/IP 协议栈 客户端 纯VHDL代码编写 提供4套vivado工程源码和技术支持

目录 1、前言版本更新说明免责声明 2、相关方案推荐我这里已有的以太网方案1G 千兆网 TCP-->服务器 方案10G 万兆网 TCP-->服务器客户端 方案常规性能支持多节点FPGA资源占用少数据吞吐率高低延时性能 4、TCP/IP 协议栈代码详解代码架构用户接口代码模块级细讲顶层模块PA…

AtCoder Beginner Contest 332 G. Not Too Many Balls(最大流转最小割 dp)

题目 n(n<500)种球&#xff0c;第i种有ai(0<ai<1e12)个球&#xff0c; m(m<5e5)个盒子&#xff0c;第j个能放bj(0<bj<1e12)个球 特别地&#xff0c;第j个盒子最多能放i*j个第i种球 求m个盒子能放的最多的球的总数 思路来源 官方题解 题解 显然是一个最…

关于“Python”的核心知识点整理大全26

目录 10.3.9 决定报告哪些错误 10.4 存储数据 10.4.1 使用 json.dump()和 json.load() number_writer.py number_reader.py 10.4.2 保存和读取用户生成的数据 对于用户生成的数据&#xff0c;使用json保存它们大有裨益&#xff0c;因为如果不以某种方式进行存储&#xf…

CyclicBarrier学习一

一、定义 CyclicBarrier 字面意思回环栅栏&#xff08;循环屏障&#xff09;&#xff0c;通过它可以实现让一组线程等待至某个状态&#xff08;屏障点&#xff09;之后再全部同时执行。叫做回环是因为当所有等待线程都被释放以后&#xff0c;CyclicBarrier可以被重用。 CyclicB…