微信小程序登录功能的前端设计与实现

import { Status } from '@beautywe/plugin-status';
// on app.jsApp({    status: {       login: new Status('login');    },
    onLaunch() {        session            // 发起静默登录调用            .login()
            // 把状态机设置为 success            .then(() => this.status.login.success())
            // 把状态机设置为 fail            .catch(() => this.status.login.fail());    },});
// on page.jsPage({    onLoad() {      const loginStatus = getApp().status.login;
      // must 里面会进行状态的判断，例如登录中就等待，登录成功就直接返回，登录失败抛出等。      loginStatus().status.login.must(() => {        // 进行一些需要登录态的操作...      });    },});

// 发起请求，并表明该请求是需要登录态的fly.post('https://...', params, { needLogin: true });
// 在 fly 拦截器中处理逻辑fly.interceptors.request.use(async (req)=>{
  // 在请求需要登录态的时候  if (req.needLogin !== false) {
    // ensureLogin 核心逻辑是：判断是否已登录，如否发起登录调用，如果正在登录，则进入队列等待回调。    await session.ensureLogin();
    // 登录成功后，获取 token，通过 headers 传递给后端。    const token = await session.getToken();    Object.assign(req.headers, { [AUTH_KEY_NAME]: token });  }
  return req;});

// 添加响应拦截器fly.interceptors.response.use(    (response) => {      const code = res.data;
      // 登录态过期或失效      if ( ['AUTH_EXPIRED', 'AUTH_INVALID'].includes(code) ) {
        // 刷新登录态        await session.refreshLogin();
        // 然后重新发起请求        return fly.request(request);      }    })

class Session {  // ....
  // 刷新登录保险丝，最多重复 3 次，然后熔断，5s 后恢复  refreshLoginFuseLine = REFRESH_LOGIN_FUSELINE_DEFAULT;  refreshLoginFuseLocked = false;  refreshLoginFuseRestoreTime = 5000;
  // 熔断控制  refreshLoginFuse(): Promise<void> {    if (this.refreshLoginFuseLocked) {      return Promise.reject('刷新登录-保险丝已熔断，请稍后');    }    if (this.refreshLoginFuseLine > 0) {      this.refreshLoginFuseLine = this.refreshLoginFuseLine - 1;      return Promise.resolve();    } else {      this.refreshLoginFuseLocked = true;      setTimeout(() => {        this.refreshLoginFuseLocked = false;        this.refreshLoginFuseLine = REFRESH_LOGIN_FUSELINE_DEFAULT;        logger.info('刷新登录-保险丝熔断解除');      }, this.refreshLoginFuseRestoreTime);      return Promise.reject('刷新登录-保险丝熔断!!');    }  }
  // 并发回调队列  refreshLoginQueueMaxLength = 100;  refreshLoginQueue: any[] = [];  refreshLoginLocked = false;
  // 刷新登录态  refreshLogin(): Promise<void> {    return Promise.resolve()
      // 回调队列 + 熔断 控制      .then(() => this.refreshLoginFuse())      .then(() => {        if (this.refreshLoginLocked) {          const maxLength = this.refreshLoginQueueMaxLength;          if (this.refreshLoginQueue.length >= maxLength) {            return Promise.reject(`refreshLoginQueue 超出容量：${maxLength}`);          }          return new Promise((resolve, reject) => {            this.refreshLoginQueue.push([resolve, reject]);          });        }        this.refreshLoginLocked = true;      })
      // 通过前置控制之后，发起登录过程      .then(() => {        this.clearSession();        wx.showLoading({ title: '刷新登录态中', mask: true });        return this.login()          .then(() => {            wx.hideLoading();            wx.showToast({ icon: 'none', title: '登录成功' });            this.refreshLoginQueue.forEach(([resolve]) => resolve());            this.refreshLoginLocked = false;          })          .catch(err => {            wx.hideLoading();            wx.showToast({ icon: 'none', title: '登录失败' });            this.refreshLoginQueue.forEach(([, reject]) => reject());            this.refreshLoginLocked = false;            throw err;          });      });
  // ...}

// 定义检查 session_key 有效性的操作const ensureSessionKey = async () => {  const hasSession = await new Promise(resolve => {    wx.checkSession({      success: () => resolve(true),      fail: () => resolve(false),    });  });
  if (!hasSession) {    logger.info('sessionKey 已过期，刷新登录态');
    // 接上面提到的刷新登录逻辑    return session.refreshLogin();  }
  return Promise.resolve();}
// 在发起请求的时候，先做一次确保 session_key 最新的操作（以 fly.js 作为网络请求层为例）const updatePhone = async (params) => {  await ensureSessionKey();  const res = await fly.post('https://xxx', params);}
// 添加响应拦截器, 监听网络请求返回fly.interceptors.response.use(    (response) => {      const code = res.data;
      // 登录态过期或失效      if ( ['DECRYPT_WX_OPEN_DATA_FAIL'].includes(code)) {
        // 刷新登录态        await session.refreshLogin();
        // 由于加密场景的加密数据由用户点击产生，session_key 可能已经更改，需要用户重新点击一遍。        wx.showToast({ title: '网络出小差了，请稍后重试', icon: 'none' });      }    })

// 用户登录的阶段export enum AuthStep {  // 阶段一：只有登录态，没有用户信息，没有手机号  ONE = 1,
  // 阶段二：有用户信息，没有手机号  TWO = 2,
  // 阶段三：有用户信息，有手机号  THREE = 3,}

// auth-flow component
Component({  // ...
  data: {    // 默认情况下，只需要到达阶段二。    mustAuthStep: AuthStep.TWO  },
  // 允许临时更改组件的需要达到的阶段。  setMustAuthStep(mustAuthStep: AuthStep) {    this.setData({ mustAuthStep });  },
  // 根据用户当前的信息，计算用户处在授权的阶段  getAuthStep() {    let currAuthStep;
    // 没有用户信息，尚在第一步    if (!session.hasUser() || !session.hasUnionId()) {      currAuthStep = AuthStepType.ONE;    }
    // 没有手机号，尚在第二步    if (!session.hasPhone()) {      currAuthStep = AuthStepType.TWO;    }
    // 都有，尚在第三步    currAuthStep = AuthStepType.THREE;    return currAuthStep;  }
  // 发起下一步授权，如果都已经完成，就直接返回成功。  nextStep(e) {    const { mustAuthStep } = this.data;    const currAuthStep = this.updateAuthStep();
    // 已完成授权    if (currAuthStep >= mustAuthStep || currAuthStep === AuthStepType.THREE) {      // 更新全局的授权状态机，广播消息给订阅者。      return getApp().status.auth.success();    }
    // 第一步：更新用户信息    if (currAuthStep === AuthStepType.ONE) {      // 已有密文信息，更新用户信息      if (e) session.updateUser(e);
      // 更新到视图层，展示对应UI，等待获取用户信息      else this.setData({ currAuthStep });      return;    }
    // 第二步：更新手机信息    if (currAuthStep === AuthStepType.TWO) {      // 已有密文信息，更新手机号      if (e) this.bindPhone(e);
      // 未有密文信息，弹出获取窗口      else this.setData({ currAuthStep });      return;    }
    console.warn('auth.nextStep 错误', { currAuthStep, mustAuthStep });  },
  // ...});

<view class="auth-flow">
  <!-- 已完成授权 -->  <block wx:if="{{currAuthStep === mustAuthStep || currAuthStep === AuthStep.THREE}}">    <view>已完成授权</view>  </block>
  <!-- 未完成授权，第一步：授权用户信息 -->  <block wx:elif="{{currAuthStep === AuthStep.ONE}}">    <user-container bind:getuserinfo="nextStep">      <view>授权用户信息</view>    </user-container>  </block>
  <!-- 未完成授权，第二步：授权手机号 -->  <block wx:elif="{{currAuthStep === AuthStep.TWO}}">    <phone-container bind:getphonenumber="nextStep">      <view>授权手机号</view>    </phone-container>  </block>
</view>

// 授权的展示形式export enum AuthDisplayMode {  // 以弹窗形式  POPUP = 'button',
  // 以页面形式  PAGE = 'page',}

class Session {  // ...
  mustAuth({    mustAuthStep = AuthStepType.TWO, // 需要授权的LEVEL，默认需要获取用户资料    popupCompName = 'auth-popup',   // 授权弹窗组件的 id    mode = AuthDisplayMode.POPUP, // 默认以弹窗模式  } = {}): Promise<void> {
    // 如果当前的授权步骤已经达标，则返回成功    if (this.currentAuthStep() >= mustAuthStep) return Promise.resolve();
    // 尝试获取当前页面的 <auth-popup id="auth-popup" /> 组件实例    const pages = getCurrentPages();    const curPage = pages[pages.length - 1];    const popupComp = curPage.selectComponent(`#${popupCompName}`);
    // 组件不存在或者显示指定页面，跳转到授权页面    if (!popupComp || mode === AuthDisplayMode.PAGE) {      const curRoute = curPage.route;
      // 跳转到授权页面，带上当前页面路由，授权完成之后，回到当前页面。      wx.redirectTo({ url: `authPage?backTo=${encodeURIComponent(curRoute)}` });      return Promise.resolve();    }
    // 设置授权 LEVEL，然后调用 <auth-popup> 的 nextStep 方法，进行进一步的授权。    popupComp.setMustAuthStep(mustAuthStep);    popupComp.nextStep();
    // 等待成功回调或者失败回调    return new Promise((resolve, reject) => {      const authStatus = getApp().status.auth;      authStatus.onceSuccess(resolve);      authStatus.onceFail(reject);    });  }
  // ...}

Page({  onLoad() {    session.mustAuth().then(() => {      // 开始初始化页面...    })；  }
  onClick(e) {    session.mustAuth().then(() => {      // 开始处理回调逻辑...    })；  }})

export function mustAuth(option = {}) {  return function(    _target,    _propertyName,    descriptor,) {    // 劫持目标方法    const method = descriptor.value;
    // 重写目标方法    descriptor.value = function(...args: any[]) {      return session.mustAuth(option).then(() => {        // 登录完成之后，重放原来方法        if (method) return method.apply(this, args);      });    };  };}

Page({  @mustAuth();  onLoad() {    // 开始初始化页面...  }
  @mustAuth();  onClick(e) {    // 开始处理回调逻辑...  }});