微信小程序电商实战-登录模块设计

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

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

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

前言

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

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

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

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

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

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

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

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

流程

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

登录整体设计流程


登录控制流程.png

实现

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

  1. 完成模拟接口
  2. 编写数据模型
  3. 组织界面

依照上面的步骤，我们首先编写登录接口模拟，代码及解释如下：(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，备注小程序开发交流，这里主要是探讨小程序开发遇到的各种填坑办法

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,294评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,493评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,790评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,595评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,718评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,906评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,053评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,797评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,250评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,388评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,018评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2赞 350