小程序静默登录-登录拦截实现方案【全局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);
};

代码片段

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

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

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

到了这里,关于小程序静默登录-登录拦截实现方案【全局loginPromis加页面拦截】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringCloud GateWay网关通过全局拦截器GlobalFilter实现API日志

    产品经理突然找到我说,咱们这个产品貌似没有实现之前旧的系统平台操作日志了;希望我尽快实现这个需求,以应对一些检查;因为时间关系再加上人员问题,跟我原先规划得有些背道而驰 1.写一个AOP日志Starter,再需要的模块中引入,对应方法去标记注解,工程量比较大,

    2024年02月11日
    浏览(54)
  • SpringBoot加入拦截器——登录拦截器的实现

            拦截器 Interceptor 在 Spring MVC 中的地位等同于 Servlet 规范中的过滤器 Filter,拦截的是处理器的执行,由于是全局行为,因此常用于做一些通用的功能,如请求日志打印、权限控制等。         核心原理:AOP思想 preHandle:  预先处理,在目标的controller方法执行之前,进行

    2024年02月15日
    浏览(43)
  • springBoot JWT实现websocket的token登录拦截认证

    功能:所有关于websocket的请求必须登录,实现websocket需要登录后才可使用,不登录不能建立连接。 后台spring security配置添加websocket的请求可以匿名访问,关于websocket的请求不要认证就可以随意访问,去除匿名访问后,前端在与websocket建立链接无法在请求头里直接加入Authoriz

    2024年02月13日
    浏览(49)
  • 【AntDesign】封装全局异常处理-全局拦截器

    目录 场景 1 定义全部异常处理类 2 替换request引用 3 代码优化 总结 本文前端用的是阿里的Ant-Design框架,其他框架也有全局拦截器,思路是相同,具体实现自行百度下吧 因为每次都需要调接口,都需要单独处理异常情况(code !=0),因此前端需要对后端返回的通用响应进行统

    2024年02月08日
    浏览(47)
  • 【Spring实战项目】SpringBoot3整合WebSocket+拦截器实现登录验证!从原理到实战

    🎉🎉 欢迎光临,终于等到你啦 🎉🎉 🏅我是 苏泽 ,一位对技术充满热情的探索者和分享者。🚀🚀 🌟持续更新的专栏 《Spring 狂野之旅:从入门到入魔》 🚀 本专栏带你从Spring入门到入魔   这是苏泽的个人主页可以看到我其他的内容哦👇👇 努力的苏泽 http://suzee.blog.

    2024年04月17日
    浏览(58)
  • SpringBoot的全局异常拦截

    在 Spring Boot 中,可以通过使用 @ControllerAdvice 注解和 @ExceptionHandler 注解来实现全局异常拦截。 @RestControllerAdvice 是 Spring Framework 提供的注解,用于定义全局异常处理类,并且结合 @ExceptionHandler 注解来处理异常。与 @ControllerAdvice 不同的是, @RestControllerAdvice 默认情况下会将返回

    2024年02月04日
    浏览(42)
  • 微信小程序 跳转页面经常会遇到判断是否登录情况。基于此需求,做了一个路由跳转拦截的jump组件

    组件代码非常简单 在根目录创建components目录 在components目录新建jump目录 在jump目录新建四个文件 index.js index.json index.wxml index.wxss 这个样式文件内容空就行

    2024年02月09日
    浏览(54)
  • Java后台实现网站微信扫码登录功能,获取用户openid,及微信用户信息(小程序码方案),关联微信小程序(个人主体小程序也可以)

    目录 前言 下面展示操作流程 注册微信小程序 通过后台获取小程序码 前端处理 时序图理解 方案实现步骤 前言 很多业务场景之下我们需要实现  微信扫码登录  的需求,如: 同步网站与小程序的用户数据 。 需要获取用户微信相关基本信息,如头像、id等 实例:小程序上的

    2024年02月02日
    浏览(58)
  • GateWay自定义网关全局拦截

    在com.xxxxa.gateway.filter包下创建 是在网关下面操作: 网关的包里创建: 定义方式是非常简单,只需实现 GlobalFilter 接口 —————————————————————————————————————————————— 在filter中编写自定义逻辑,可以实现下列功能: 登

    2024年02月10日
    浏览(36)
  • Spring Boot 统一功能处理(拦截器实现用户登录权限的统一校验、统一异常返回、统一数据格式返回)

    目录 1. 用户登录权限校验 1.1 最初用户登录权限效验 1.2 Spring AOP 用户统⼀登录验证 1.3 Spring 拦截器 (1)创建自定义拦截器 (2)将自定义拦截器添加到系统配置中,并设置拦截的规则 1.4 练习:登录拦截器 (1)实现 UserController 实体类 (2)返回的登录页面:login.html (3)实

    2024年02月12日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包