电商小程序登录模块设计

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 f rom '../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 f rom '@tarojs/taro'

import { userLogin } f rom '../requests/user'
import { TOKEN_KEY } f rom '../constants/common'
import { getAuthorize } f rom '../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 f rom './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 f rom '../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 f rom '@tarojs/taro'
import { userUploadInfo, userGetInfo } f rom '../requests/user'
import { getAuthorize } f rom '../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 } f rom '@tarojs/taro'
import { View, Text, Button } f rom '@tarojs/components'
import { connect } f rom '@tarojs/redux'
import { dispatcher } f rom '@opcjs/zoro'

import ComponentCommonModal f rom '../modal/modal'
import { weappApiFail } f rom '../../../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 } f rom '@tarojs/taro'
import { View, Text } f rom '@tarojs/components'

import ComponentCommonLogin f rom '../../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

最后来看看最终效果吧