本项目基于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 (
欢迎加入四叶草庄园
)
}
}
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 (
首页
)
}
}
export default PageHome
最后来看看最终效果吧
QQ20181207-131915-HD.gif
该系列文章会持续更新，由于工作忙碌，为了保证文章质量，更新较为缓慢，如果你是小程序爱好者，欢迎加我微信Faure5，备注小程序开发交流，这里主要是探讨小程序开发遇到的各种填坑办法