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万用户,亲测没遇到什么问题。
场景复现:
有个电商小程序,用户下了订单,需给用户发个订阅消息,当用户点击订阅消息时直接进入订单详情页。
那前端逻辑,就是在订单详情页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里直接调用接口