【实战】小程序授权登录的最佳实践(一)

关于微信小程序授权登录的最佳实践,我觉得最重要的一点是:在满足需求的情况下,不侵入业务逻辑

源码详见/src/request/

所以,首先需要搞清楚有哪些需求。(注:本文只针对小程序原生框架)

对于大部分应用,并不是所有页面/接口都需要登录才可访问,这就要求登录功能需要实现:仅在需要登录的时候,中断业务,进入登录流程,登录成功则自动进行之前中断的业务(这很重要),失败则提示错误信息,如下:

  1. 发现需要登录,
    • 用户已授权
      • 存在登录 token,业务继续进行
      • 否则,调用登录接口,业务继续进行
    • 用户未授权,去到第 2 步
  2. 跳转到授权登录页
    • 登录成功,业务继续进行
    • 登录失败,分为两种情况
      • 未注册,则去到第 3 步
      • 其他,提示错误信息,允许用户重试
  3. 跳转到注册登录页
    • 登录成功,业务继续进行
    • 登录失败,提示错误信息,允许用户重试

要实现登录功能的灵活性和无侵入性,我们需要:

  • 封装 wx.request(),所有请求都必须使用这个接口
  • 由业务方控制登录时机
  • 单独的授权登录页和注册登录页

举个例子:
假设页面有一个表单,点击提交按钮,需要登录后才能向后台发送请求,业务同学可以这样使用:

// request 对 wx.request 做了封装,现在并不需要关心它的内部实现
import request from '../request/request.js'
// 我们实现的授权登录对象,现在只需要知道 auth.ensure 的成功,确保了登录的成功
import auth from '../request/auth.js'

Page({
  data: {},

  tapSubmit() {
    // 业务方控制登录的时机
    return auth.ensure()
      .then(() => {
        const opts = {
          // 提交的参数
        }
        return request({
          auth: true,
          method: 'POST',
          url: '/api/send/xxx',
          data: opts
        })
      })
      .then( // 提交成功后的处理逻辑)
      .catch(// auth.ensure 以及 request 失败的处理逻辑)
  }
})

可以看到,除了增加 auth.ensure() 方法外,登录逻辑对业务毫无侵入。

我们已经在 request 方法内增加了 auth: true, 为什么还要额外使用 auth.ensure()?

可不可以去掉呢?

咱们下期揭晓。

微信小程序授权登录最佳实践

posted @ 2019-05-15 17:47 廖飞银 阅读(...) 评论(...) 编辑 收藏