小程序静默登录设计
发布于 1 年前 作者 jingyu 1330 次浏览 来自 分享

简介

本文主要分享个人平时开发微信小程序时登录设计的思路，目前微信小程序的登录机制与以前的小程序登录机制或网页的登录机制不一样

一. 静默登录

小程序目前的登录方式采用的是__静默登录__的形式，即用户不需要进行任何相关授权或其他操作就可以很流畅的体验整个应用，不像以前的小程序应用很多功能都需要手动去判断用户是否已经登录过再去开放某些入口或功能（当然目前也有不少小程序改成绑定手机号的形式去搞这种需求）

静默登录目前有以下几点好处：

  • 不需要特意去增加一个登录界面或者登录弹窗去实现登录功能
  • 减少前端对一些特定按钮进行登录状态判断的工作量
  • 用户不需要进行额外登录操作才能完美体验整个小程序
  • 更好的保障用户隐私安全，当然这是对 TX 有好处（毕竟很多小程序喜欢采用强制登录来获取用户信息）

二. 静默登录流程

  1. 前端调用 wx.login 这个 api 获取临时登录凭证（code）
  2. 前端调用服务端登录接口传递 code 给服务端
  3. 服务端通过小程序 appId 和小程序秘钥向微信服务器获取 openId 和 session_key
  4. 服务端将 openId 和 session_key 进行关联同时产生一个带有默认名称和默认头像的新用户
  5. 服务端将自定义登录的信息返回给前端，下次请求服务端接口时把登录信息带上

三. 静默登录设计思路

前端调用 wx.login 是不需要进行任何相关操作的，所以触发登录完全是由前端去决定的，而进行登录不能以指定页面作为参考点，需要考虑到用户分享从其他页面进入的情况

现在需要一种，目前个人思考出有两种方案：

每个页面都套用一个 `` layout `` 自定义组件，在该组件的生命周期进行登录触发，然后触发完毕后在组件抛出一个登录后的回调函数，接着页面接收这个回调函数然后在这个函数调用业务 `` api ``

在每次请求服务端 `` api `` 之前，先进行登录，等待登录处理完毕之后再进行请求服务端

两者比较之后目前是采用第二种方式去进行登录流程设计，因为静默登录完全跟用户没有任何关系，只是单纯与服务端进行交流，所以不应该与页面有关系，应该是跟请求服务端 api 有关系

四. 静默登录设计实现

由于采用 api 拦截方式实现登录设计，登录的代码都放在 api 请求模块去实现，以下是实现思路：

  1. 在页面中调用服务端 api，首先判断是否已经登录过，如果没有登录则先触发登录再请求服务端 api，如果登录则直接请求
  2. 考虑到一个页面可能会同时调用多个服务端 api，需要避免同时触发多次登录
// 登录后的信息
const token = {
    // ...
}

// 请求封装
const _request = <T = unknown>(apiLink: string, params?: Record<string, any>): Promise<T | null> => {
    return new Promise((resolve, reject) => {
        wx.request({
          url: apiLink,
          data: params,
            success: (res) => {
                resolve(res.data)
            },
            fail: (err) => {
                reject(null)
            }
        })
    })
}

// 记录登录状态
let _loginRecord: any = null

// 请求拦截
const apiRequest = async <T = unknown>(apiLink: string, params?: Record<string, any>): Promise<T | null> => {
  
  // 如果一个页面同时触发多个 api 请求，那么只公用一个登录的 Promise 状态，这样就不会多次触发登录
  if (!_loginRecord) {
    _loginRecord = _request('xxxxx/login', { code: 'xxxx' })
  }
  
  const loginResult = await _loginRecord
  
  /**
   * 这里根据业务需求去定制登录报错时的情况，我目前是
   * 先弹窗提示，然后用户确认后再重新请求 api
   *
  if (!loginResult) {
    _loginRecord = null
    return null
  }

  return await _request(apiLink, params)
}

export default apiRequest

五. 最后

以上是我个人常用的微信小程序静默登录设计思路，如果有小伙伴有更好的设计思路，希望能够分享出来学习一下

回到顶部