怎么在微信小程序中監聽用戶登錄事件

本篇文章給大家分享的是有關怎么在微信小程序中監聽用戶登錄事件，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

需求如下：

• 小程序共三個tab頁，所有用戶都可以瀏覽首頁內容，了解我們可以提供的優質服務；

• 進入其他兩個頁面之后，如果用戶沒有登錄，那就顯示登錄按鈕，如果登錄了，則顯示服務內容；

• 用戶在一個頁面登陸之后，全局生效。

就這么個看起來很簡單的需求，也經過了如下迭代：

• 將登錄狀態和憑據存儲在 App.globalData.authorize 中，每個需要授權的頁面 onload 生命周期檢查 App.globalData.authorize.authorized ，為 true 時渲染服務內容，為 false 則顯示登錄按鈕；

• 但如果打開了需要授權的頁面 A 但是沒有登錄，再打開頁面 B 登錄，這時候回到 A 頁面，登錄按鈕赫然在眼，這是因為 A 頁面的 onload 回調函數只執行了一次；

• 為了能在 A 頁面及時共享 B 頁面登錄后的狀態，在 A 頁面的 onshow 生命周期里再獲取了一次登錄狀態，但這樣一來，打開 A 頁面的時候，會出現短暫的白屏，用戶甚至有可能看到按鈕變成服務內容的整個過程。

翻遍小程序 API 文檔 ，也沒有發現用于監聽登錄的生命周期，就算有也用不了，因為我們有著自己的賬號體系，服務端認證完畢才算真正的登錄成功。

所以我決定自己包裝原有的 Page 函數，添加一個 onauth 生命周期——

首先是自定義登錄事件的觸發與監聽，官方的EventChannel 需要向后兼容，橫豎是個訂閱回調，那我還不如自己擼一個得了：

/**
 * @file utils/event.js
 */

/**
 * @const EMPTY_HANDLER
 * @desc 空事件回調，被取消事件將被指向此函數
 */
const EMPTY_HANDLER = () => {};

/**
 * @const eventSet - 事件監聽函數集
 */
const eventSet = {
 authorize: []
};

/**
 * @function emit - 發送全局事件
 * @param {String} type - 事件類型
 * @param {Object} event - 事件對象
 */
export const emit = (type, event) => (eventSet[type] || []).forEach(item => item(Object.freeze(event)));

/**
 * @function on - 注冊全局事件
 * @param {String} type - 事件類型
 * @param {Function} callback - 事件回調函數
 */
export const on = (type, callback) => {
 if (!eventSet[type]) {
  eventSet[type] = [];
 }

 if (!callback instanceof Function) {
  throw new Error('callback must be a Function!');
 }

 return eventSet[type].push(callback)
};

/**
 * @function off - 取消對某事件的監聽
 * @param {String} type - 事件類型 
 * @param {Number} id - 需要取消的事件ID，即 registEvent 所返回的值
 */
export const off = (type, id) => {
 if (!eventSet[type]) return

 eventSet[type][id - 1] = EMPTY_HANDLER

 // 如果某類事件已經全被取消的話，將其置為空數組
 const noListener = !eventSet[type].reduce((pre, cur) => (cur && cur === EMPTY_HANDLER) || pre, false);
 if (noListener){
  eventSet[type] = []
 };
}

然后是對 Page 函數的魔改：

/**
 * @file utils/auth-page.js
 */

import { on } from '/event.js';

export const AuthPage = function(options){
 const { onAuth, data, onLoad } = options;
 const userInfo = {
  nickName: '', // 昵稱
  account: '', // 賬號
  avatar: { // 頭像
   small: '',
   middle: '',
   large: ''
  },
  title: 'student', // 頭銜
  phoneNumber: 0, // 電話號碼
  gender: 'secret', // 性別
  'class': '' // 班級
 }

 if (options.data){
  options.data.authorized = false;
  options.data.userInfo = userInfo
 } else {
  options.data = {
   authorized: false,
   userInfo: userInfo
  }
 }

 /**
  * 仍舊調用原始的 Page 方法
  */
 Page(Object.assign(
  options,
  {
   onLoad: function () {
    const { authorize, userInfo } = getApp().globalData;

    // 執行開發者期望的 onload 事件
    onLoad instanceof Function && onLoad.bind(this)(arguments);

    // 頁面初始化時，若已經授權，直接執行授權回調
    // 否則將授權回調注冊為授權事件回調
    if (onAuth instanceof Function){
     if (authorize.authorized){
      onAuth.bind(this)({
       type: 'authorize',
       authorized: true,
       token: authorize.token,
       userInfo: userInfo
      });
     } else {
      on('authorize', onAuth.bind(this));
     }
    }
   }
  }
 ));
}

最后，在登錄組件的里：

import { emit } from '../../utils/event.js';

wx.login({
  success: res => {
    // ...這里省略了一些復雜的登錄流程
    getApp().globalData.authorize = {
      authorized: true
    };
    emit('authorize', res);
  }
})

以上就是怎么在微信小程序中監聽用戶登錄事件，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。