微信小程序电商实战-高可用登录设计

作者: FaureWu | 来源:发表于2018-12-07 13:29 被阅读16次

本项目基于ztaro脚手架快速搭建开发环境，在看这篇文章之前建议首先查看ztaro文档，或者ztaro介绍，并且对于taro，zoro有所了解

本系列文章后台api部分均以数据mock方式完成，仅保证整体流程跑通，不阻碍前端系统开发即可，同时也希望有经验后台开发人员可以完善该系统api部分

该项目代码托管于github，weapp-clover，该项目用到了阿里云oss，请自行解决账号，配置方法查看ztaro

前言

微信小程序业务愈加庞大，像那种脱离用户信息的小程序已经越来越少了，更多时候，我们希望能增加用户的粘性，基于用户信息做推荐，基于这个原因，当我们在设计系统时，会发现绝大部分的API接口设计都是基于用户已经登录的前提下，这会对我们前端设计造成极大的影响

大多数情况下，我们会在微信onLoad函数中去发起request请求，获取当前页面的数据，如果在此时，用户还未登录完成，那获取接口将会是失败的

我们通常的解决办法如下：

专门为此设计一个登录页面，当小程序加载时跳转登录页，登录完成后跳转回来

这种方式优点是，我们无需在每个页面监听登录回调后在调用数据接口，缺点是用户对于登录的感知明显，无法做到静默登录

在每个页面中注册登录回调事件，仅当登录接口成功返回后才获取数据

该方式优点是，无需额外的登录页面，静默登录，用户无感知，缺点是开发维护成本较大，需要每个页面多做额外的处理，系统庞大之后，容易遗忘

第三种方式，也是我们今天主要介绍的方式，通过异步阻塞的方式等待登录完成，优点是静默登录，用户绝大部分时间无感知，开发维护成本较小，缺点是需要兜底重登录页

流程

微信登录流程这里不再给出了，不了解微信登录的直接查看官方文档
微信登录

登录整体设计流程

登录控制流程.png

实现

要完成一个完整的前端模块功能，我们总需要经历三个步骤：

完成模拟接口
编写数据模型
组织界面

依照上面的步骤，我们首先编写登录接口模拟，代码及解释如下：(mocks/user.js)

const faker = require('faker')

function userLogin(req, res) {
  // 获取前端传递过来的code
  // 然后根据小程序appid，appsecret，code访问微信服务器api获取session_key，openid，这一步骤，无需模拟
  // 根据session_key，openid关联自定义登录态，生成token，并创建匿名用户
  const { code } = req.body

  res.status(200).json({
    code: 'success',
    message: '登录成功',
    // token已经利用express启动时设置于locals中，这里只需获取即可
    token: req.app.locals.token,
  })
}

module.exports = {
  'POST /v1/user/login': userLogin,
}

接下来我们需要实现登录拦截器，新增effect拦截器(app.js)

// 利用taro全局事件机制，等待登录事件触发
function waitLogin() {
  return new Promise(resolve => {
    Taro.eventCenter.on('login', resolve)
  })
}

/**
 * 由于后台绝大部分接口都需要用户预先登录才可以获取数据
 * 并且前端所有的接口调用都发生在页面中，难以在页面中统一控制接口必须在登录完成后才触发调用
 * 因此在这里设置登录拦截器，拦截所有需要预先登录的接口，等待登录完成后返回
 */
app.intercept.effect(async action => {
  // 我们通过action.meta字段来标记是否需要进行授权
  if (action.meta && action.meta.noAuth) return action

  try {
    // 检测本地是否存在token，存在则无需等待登录
    const token = Taro.getStorageSync(TOKEN_KEY)
    if (!token) {
      await waitLogin()
    }
  } catch (error) {
    await waitLogin()
  }
})

登录请求实现(src/requests/user.js)

import request from '../utils/request'

export function userLogin(data) {
  return request({
    url: '/v1/user/login',
    data,
    header: {
      noAuth: true,
    },
    method: 'POST',
  })
}

user model实现(src/models/user.js)

import Taro from '@tarojs/taro'

import { userLogin } from '../requests/user'
import { TOKEN_KEY } from '../constants/common'
import { getAuthorize } from '../utils/tools'

export default {
  namespace: 'user',

  mixins: ['common'],

  state: {
    memberId: '',
    memberInfo: {},
  },
  
  // 该函数会在model初始化的时候调用setup
  async setup({ put }) {
    try {
      // 首先检测微信登录是否过期，过期则重新登录
      // 也因此我们在设计后台token有效期时，应大于微信登录态有效期
      await Taro.checkSession()
      // 微信登录未过期，尝试获取本地token
      const token = await Taro.getStorage({ key: TOKEN_KEY })
      if (!token) {
        // 本地无token存在时重新发起登录，并在登录完成后触发login全局事件，打通拦截器
        await put({ type: 'login', meta: { noAuth: true } })
        Taro.eventCenter.trigger('login')
      } else {
        // 存在则直接触发login全局事件
        Taro.eventCenter.trigger('login')
      }
    } catch (error) {
      // 调用失败时重新发起登录，并在登录完成后触发login全局事件，打通拦截器
      await put({ type: 'login', meta: { noAuth: true } })
      Taro.eventCenter.trigger('login')
    }
  },

  effects: {
    async login() {
      const { code } = await Taro.login()
      const { token } = await userLogin({ code })
      await Taro.setStorage({ key: TOKEN_KEY, data: token })
    },
}

注册user model即可(src/models/index.js)

import user from './user'

export default [user]

修改request带上token(src/utils/request.js)

export default function request(options) {
  const { url } = options
  Taro.showNavigationBarLoading()
  
  // 获取token
  const token = Taro.getStorageSync(TOKEN_KEY)

  return Taro.request(
    resolveParams({
      ...options,
      url: `${CONFIG.SERVER}${url}`,
      mode: 'cors',
      header: {
        'content-type': 'application/json',
        // 给每一个请求带上token字段
        Authorization: `Bearer ${token}`,
        ...options.header,
      },
    }),
  )
    .then(checkHttpStatus)
    .then(checkSuccess)
    .catch(throwError)
}

登录兜底

登录主流程已完成，但是我们还没有处理异常情况，当本地存储的token过期时，我们需要重新登录小程序，这只是极少数情况下会发生，因为我们判断了微信session，并且服务器的token有效期设置大于微信有效期，这个异常处理只是一个兜底

首先我们需要屏蔽所有的因授权失败的报出的错误(app.js)

const app = zoro({
  onError(error) {
    // 屏蔽用户登录过期信息，因为当用户登录过期时会跳转自动登录
    if (error.response && error.response.statusCode === 401) return

    if (error.message) {
      Taro.showToast({
        icon: 'none',
        title: error.message,
        duration: 2000,
      })
    }
  },
})

接下来需要拦截接口401状态(src/utils/request.js)

// 通过截流函数，确保1秒内仅触发一次
const redirectToRelogin = throttle(async function() {
  // 这里的轮询是为了确保，页面已经ready，然后进行跳转
  // 因为登录检测发生在app onLaunch，此时页面并没有真正ready，调用跳转会失败
  while (true) {
    const { url, isTabbar } = getCurrentPageTypeAndUrlWithArgs()
    const redirectUrl = encodeURIComponent(`/${url}`)

    if (url) {
      Taro.redirectTo({
        url: `/pages/relogin/relogin?isTabbar=${isTabbar}&redirectUrl=${redirectUrl}`,
      })
      break
    }

    await delay(500)
  }
}, 1000)

function checkHttpStatus(response) {
  if (response.statusCode >= 200 && response.statusCode < 300) {
    Taro.hideNavigationBarLoading()
    return response.data
  }
  
  // 新增拦截401状态进行跳转登录
  if (response.statusCode === 401) {
    redirectToRelogin()
  }

  const message =
    HTTP_ERROR[response.statusCode] || `ERROR CODE: ${response.statusCode}`
  const error = new Error(message)
  error.response = response
  throw error
}

最后编写我们的relogin页面(src/pages/relogin/relogin.js)

页面样式直接查看源码，在此不列出，仅列出关键函数

class PageRelogin extends Component {
  state = {
    error: false,
  }

  componentWillMount() {
    this.handleLogin()
  }

  handleLogin = () => {
    this.setState({ error: false })
    // 获取登录完成回跳地址
    const { params: { redirectUrl, isTabbar } = {} } = this.$router
    const url = decodeURIComponent(redirectUrl)
    dispatcher.user
      .login()
      .then(() => {
        // 登录完成后回跳
        if (isTabbar) {
          Taro.switchTab({ url })
        } else {
          Taro.redirectTo({ url })
        }
      })
      .catch(() => {
        this.setState({ error: true })
      })
  }
}

用户实名

上面我们仅仅是实现了登录，但是并未获取到用户信息，也就是登录仅仅是个匿名用户而已

微信获取用户信息授权wx.getUserInfo接口已经逐步在放弃，取而代之的是通过button开放能力来实现，因此我们需要实现一个通用授权组件，引入在必要用户信息的页面中

明确了目标，我们依旧按照功能模块三步骤：

编写上传用户信息的接口模拟(mocks/user.js)

const faker = require('faker')

function userUploadInfo(req, res) {
  // 前端传递rawData, signature, encryptedData, iv校验和解析用户信息
  // 详见https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html
  const { rawData, signature, encryptedData, iv } = req.body

  res.status(200).json({
    code: 'success',
    message: '上传成功',
  })
}

function userGetInfo(req, res) {
  res.status(200).json({
    code: 'success',
    message: '获取用户信息成功',
    memberInfo: {
      memberId: faker.random.uuid(),
      nickName: 'Faure',
      avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJS8AiaqOQqE1j3qHCbiaNKF9D9BgtQuE6gFXoXPKUibRMeWvTO55TSeblaMIzFfp3lGdJt3qUPCibBTQ/132',
      city: '成都',
      province: '四川',
      country: '中国',
      gender: 1,
    }
  })
}

module.exports = {
  'POST /v1/user/info': userUploadInfo,
  'GET /v1/user/info': userGetInfo,
}

编写上传用户信息的request请求(src/requests/user.js)

import request from '../utils/request'

export function userUploadInfo(data) {
  return request({
    url: '/v1/user/info',
    data,
    method: 'POST',
  })
}

export function userGetInfo() {
  return request({
    url: '/v1/user/info',
    method: 'GET',
  })
}

编写user model中的上传用户信息部分(src/models/user.js)

import Taro from '@tarojs/taro'
import { userUploadInfo, userGetInfo } from '../requests/user'
import { getAuthorize } from '../utils/tools'

export default {
  namespace: 'user',

  mixins: ['common'],

  state: {
    authorize: true, // 新增授权字段，默认初始化为已授权
    memberInfo: {}, // 新增用户信息
  },

  async setup({ put }) {
    try {
      // 检测用户是否授权
      const authorize = await getAuthorize('userInfo')
      if (!authorize) {
        Taro.hideTabBar()
      } else {
        // 已授权，则调用获取用户数据
        put({ type: 'getInfo' })
      }

      put({ type: 'update', payload: { authorize } })
    } catch (error) {
      Taro.hideTabBar()
      put({ type: 'update', payload: { authorize: false } })
    }
    
    // 省略之前的登录部分
  },

  effects: {
    // 上传用户信息
    async uploadInfo(
      {
        payload: { rawData, signature, encryptedData, iv },
      },
      { put },
    ) {
      await userUploadInfo({ rawData, signature, encryptedData, iv })
      put({ type: 'getInfo' })
    },
    // 获取用户信息
    async getInfo(action, { put }) {
      const { memberInfo } = await userGetInfo()
      put({ type: 'update', payload: { memberInfo } })
    },
  },
}

编写界面，仅列出关键代码，样式及界面请查看仓库源码(src/components/login/login.js)

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { dispatcher } from '@opcjs/zoro'

import ComponentCommonModal from '../modal/modal'
import { weappApiFail } from '../../../utils/tools'

import './login.scss'

@connect(({ user }) => ({
  authorize: user.authorize,
}))
class ComponentCommonLogin extends Component {
  handleUploadUserInfo = ({
    detail: { errMsg, rawData, signature, encryptedData, iv },
  }) => {
    if (!weappApiFail(errMsg)) {
      dispatcher.user.uploadInfo({ rawData, signature, encryptedData, iv })
      dispatcher.user.update({ authorize: true })
      Taro.showTabBar()
    }
  }

  render() {
    const { authorize } = this.props

    return (
      <ComponentCommonModal visible={!authorize}>
        <View className="login">
          <View className="logo" />
          <Text className="title">欢迎加入四叶草庄园</Text>
          <Button
            className="btn"
            openType="getUserInfo"
            lang="zh_CN"
            onGetUserInfo={this.handleUploadUserInfo}
          >
            微信登录
          </Button>
        </View>
      </ComponentCommonModal>
    )
  }
}

export default ComponentCommonLogin

最后只需将login组件引入到页面中(src/pages/home/home.js)

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

import ComponentCommonLogin from '../../components/common/login/login'

import './home.scss'

class PageHome extends Component {
  config = {
    navigationBarTitleText: '四叶草庄园',
  }

  state = {
    // 请到README.md中查看此参数说明
    __TAB_PAGE__: true, // eslint-disable-line
  }

  componentDidMount() {}

  render() {
    return (
      <View className="home">
        <ComponentCommonLogin />
        <Text>首页</Text>
      </View>
    )
  }
}

export default PageHome

最后来看看最终效果吧

QQ20181207-131915-HD.gif

该系列文章会持续更新，由于工作忙碌，为了保证文章质量，更新较为缓慢，如果你是小程序爱好者，欢迎加我微信Faure5，备注小程序开发交流，这里主要是探讨小程序开发遇到的各种填坑办法

微信小程序电商实战-高可用登录设计

前言

流程

实现

登录兜底

用户实名

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

微信小程序开发

前端小圈子

让前端飞

前端

系列

技术文

小程序开发