小程序初始化时的用户状态管理

经常能看到有同学提问这个问题,刚好我之前也处理过,分享下我的方案。

思路如下:

  1. App.onLaunch 的时候检查用户状态,将检查过程封装成 Promise,存在 app 实例上
  2. 所有的可能作为入口的页面,初始化拆成两部分:1. 初始化,呈现 loading;2. 启动,解除 loading。
  3. 入口页等待用户状态检查结束,根据结果显示

写成代码大概是这样:

// app.js
App({
  loginPromise: null,
  onLaunch() {
    // 假设在 `checkSession` 里,你
    // 1. 验证用户登录状态
    // 2. 获取用户信息
    // 3. 并且把数据放到该放的地方
    this.loginPromise = checkSession();
  },
});

// 入口,比如 pages/index/index.js
const app = getApp();

Page({
  onLoad() {
    // 其它的初始化动作
    // 使用 app 里的 promise
    app.loginPromise
      .then(user => {
        // 处理用户身份
        // 处理完成之后,然后启动
        this.doStart();
      });
  },
  doStart() {
    // 启动函数,主要根据用户登录状态显示不同的内容
  },
});

作者: meathill

爱编程,爱旅游,爱吐槽。 今年的目标是完成并运营至少一个 Side Project。 《Electron + Vue 实战开发》龟速创作中……

欢迎吐槽,请勿装死

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据