评论

如何保证小程序的每个页面,在执行页面周期时,都是已登录(解决方案)

不管用户第一个访问的页面是:首页、详情页、购物车、个人中心...任意页面,保障该页面周期onLoad、onShow、onReady运行时,都是处于已登录(登录态)。

1. 实现效果:

不管用户第一个访问的页面是:首页、详情页、购物车、个人中心...任意页面,保障该页面周期onLoad、onShow、onReady运行时,都是处于已登录(登录态)。


2. 遇到的问题:

由于js是异步执行,直接把登录写在onLaunch,在执行页面onLoad时,可能会因为登录接口未返回,页面onLoad拿不到登录信息,导致异常。

要么每个页面都需要加登录判断,维护难度很大。


3. 解决思路

挟持Page并使用发布订阅模式,可保障任意页面执行onLoad、onShow时,自动执行:先判断当前是否已登录,未登录先订阅,已登录则执行onLoad。


4. 代码实现

// app.js
// 引入login-sdk(几十行代码),并在登录后触发登录事件,即可实现所有页面登录。
import { publisher } from "./utils/login-sdk";
App({
  onLaunch() {
    this.toLogin();
  },
  async toLogin() {
       // 模拟openid静默登录
    let { code } = await wx.login();
    setTimeout(() => {
      publisher.emit("login");
    }, 50);
  },
});

5. 代码片段

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

6. 挟持Page稳定性?

目前我们应用在电商小程序里,已有2年,服务累计3000万用户,亲测没遇到什么问题。

最后一次编辑于  2021-12-29  
点赞 4
收藏
评论

6 个评论

  • BigWhite
    BigWhite
    06-29

    大佬 试了你的方案发现不行

    我的业务是 在启动的时候获取openid和会员id 同时在index页面的onload 方法里面会有根据会员id获取数据 但是还是异步的问题导致在index 页面里面还没拿到会员id 就请求了 能解决吗?是啥问题?

    我是uniapp/vue3

    06-29
    赞同
    回复 1
    • Dzz
      Dzz
      11-15
      解决了吗
      11-15
      回复
  • 尘埃🎈
    尘埃🎈
    2022-01-04

    你这样写不是使页面阻塞了吗?如果登录耗时,如果不需要登录的页面,你拦截了所有生命周期函数,那不需要登录的业务逻辑如何处理?



    2022-01-04
    赞同
    回复 2
  • B I N G
    B I N G
    2021-12-30

    我也是采用重写的Page的方式,然后把每个页面常用的一些数据存到 Behavior ,把 Behavior注入到Page里

    2021-12-30
    赞同
    回复 1
  • 李伟豪
    李伟豪
    2021-12-29

    场景复现

    有个电商小程序,用户下了订单,需给用户发个订阅消息,当用户点击订阅消息时直接进入订单详情页。

    那前端逻辑,就是在订单详情页onLoad里,调用接口获取订单信息,后端肯定会让前端传订单ID和用户令牌(登录信息)。

    一般实现方式

    // order-detail.js
    Page({
      data: {
        orderDetail: {},
      },
      onLoad(options) {
           // 确保用户已登录
        loginSuccess().then((res) => {
          this.getDetail();
        });
      },
      getDetail() {
        // 获取订单信息
      },
    });
    
    

    PS:其他启动页,也均需要在调用时,先判断当前是否已登录

    使用本方案

    // order-detail.js
    Page({
      data: {
        orderDetail: {},
      },
      onLoad(options) {
        this.getDetail();
      },
      getDetail() {
        // 获取订单信息
      },
    });
    

    PS:其他启动页,均可在onLoad里直接调用接口

    2021-12-29
    赞同
    回复
  • 有赞
    有赞
    2021-12-29

    可以靠cookie和session,具体可以再深入了解一下

    2021-12-29
    赞同
    回复 1
    • 李伟豪
      李伟豪
      2021-12-29
      这个跟登录态没关系,不管是cookie、session还是token都适用。
      使用cookie和session时,也会出现登录未完成,启动页onLoad已经执行,登录信息(cookie或session)携带空白过去。
      2021-12-29
      回复
  • ㅤ
    2021-12-29

    请求新接口时候带参数后端直接校验是否登录不就好了

    2021-12-29
    赞同
    回复 2
    • 李伟豪
      李伟豪
      2021-12-29
      要是请求新接口时,登录接口还没响应回来,那新接口携带的登录令牌信息就是空
      2021-12-29
      回复
    • ㅤ
      2021-12-31回复李伟豪
      难道是每次请求新接口都要去请求一次登录接口?登录完了存个token,以后每次请求都带过去就完事了,缓存清过了,后端直接返回未登录,再登录呗
      2021-12-31
      回复
登录 后发表内容