用户登录与信息管理：实现小程序登录与用户信息存储

在现代的移动应用中，用户登录与信息管理是构建个性化用户体验的基础。小程序作为轻量级的应用形式，在简化开发流程的同时，也需要我们妥善管理用户的登录状态与用户信息。本文将详细介绍如何在小程序中实现用户登录功能，并将用户信息存储到全局状态管理对象Store中，以便在应用的不同部分高效访问这些信息。

程序登录图示

在深入探讨之前，让我们先通过一个简单的图示了解小程序登录的流程：

开发者服务器（后端）：负责处理小程序端发送的请求，包括验证用户身份、生成并管理自定义登录态（token）。
前端（小程序）：负责触发登录流程，获取临时登录凭证（code），并发送至后端以换取自定义登录态（token）。前端保存这个token，并在后续请求中携带。
后端流程：在接收到code后，后端将其发送到微信接口服务，以获取session_key和openid。后端将这些信息与自定义的token关联起来，并返回给前端。后续的请求中，后端会校验token的有效性。

用户登录：实现小程序登录功能

步骤1：创建登录API函数

在/api/user.js文件中，根据接口文档，创建一个用于登录的API函数login。

// /api/user.js
import http from '../utils/http'/*** @description 授权登录* @param {*} code 临时登录凭证code* @returns Promise*/
export const reqLogin = (code) => {return http.get(`/weixin/wxLogin/${code}`)
}

步骤2：绑定登录按钮事件

为登录按钮绑定点击事件，对应login回调函数。

步骤3：调用wx.login方法

在login回调函数中，调用wx.login方法获取临时登录凭证code。

步骤4：调用登录API

在/pages/login/login.js中导入封装好的API函数，传入code并调用。

// /pages/login/login.js
import { reqLogin } from '../../api/user'
import { toast } from '../../utils/extendApi'Page({// 点击登录login() {// 调用 wx.login 获取用户信息wx.login({success: async ({ code }) => {if (code) {// 调用接口 API，传入 code 进行登录const res = await reqLogin(code)// 登录成功以后将 token 存储到本地wx.setStorageSync('token', res.data.token)// 返回之前的页面wx.navigateBack()} else {// 登录失败后给用户进行提示toast({ title: '授权失败，请稍后再试~~~' })}}})}
})

步骤5：使用MobX进行全局状态管理

为了实现全局状态管理，我们将使用MobX。首先，安装MobX相关的包。

npm i mobx-miniprogram mobx-miniprogram-bindings

步骤6：创建Store

在项目的根目录下创建store文件夹，并在该文件夹下新建userstore.js。导入核心的observable和action方法，创建Store，同时声明数据和方法。

// /store/userstore.js
import { observable, action } from 'mobx-miniprogram'
import { getStorage } from '../utils/storage'// 创建 store 对象，存储应用的状态
export const userStore = observable({// 创建可观察状态 tokentoken: getStorage('token') || '',// 对 token 进行修改setToken: action(function (token) {this.token = token})
})

步骤7：关联页面与Store

在登录页面，导入ComponentWithStore方法，并配置storeBindings方法让页面和Store对象关联。

// /pages/login/login.js
import { reqLogin } from '../../api/user'
import { userStore } from '../../store/userstore'
import { ComponentWithStore } from 'mobx-miniprogram-bindings'ComponentWithStore({storeBindings: {store: userStore,fields: ['token'],actions: ['setToken']},methods: {// 授权登录login() {wx.login({success: async ({ code }) => {if (code) {const { data } = await reqLogin(code)// 将数据存储到本地和 store 对象中wx.setStorageSync('token', data.token)this.setToken(data.token)} else {toast({ title: '授权失败，请重新授权' })}}})}}
})

用户信息：将用户信息存储到Store

步骤1：新增userInfo字段

在store/userstore.js中新增userInfo字段，同时创建修改的action方法。

// /store/userstore.js
export const userStore = observable({// ...其他字段// 用户信息userInfo: wx.getStorageSync('userInfo') || {},// 设置用户信息setUserInfo: action(function (userInfo) {this.userInfo = userInfo})
})

步骤2：封装获取用户信息的API函数

在/api/user.js文件中，根据接口文档，创建获取用户信息的API函数reqUserInfo。

// /api/user.js
export const reqUserInfo = () => {return http.get(`/mall-api/weixin/getuserInfo`)
}

步骤3：在登录成功后获取用户信息

在登录成功以后，调用获取用户信息的接口，并将用户信息存储到本地和Store中。

// /pages/login/login.js
import { reqLogin, reqUserInfo } from '../../api/user'
import { setStorage } from '../../utils/storage'ComponentWithStore({// ...其他配置methods: {// 授权登录login() {wx.login({success: async ({ code }) => {if (code) {const { data } = await reqLogin(code)// 存储 token 并设置 tokenwx.setStorageSync('token', data.token)this.setToken(data.token)// 获取用户信息this.getUserInfo()} else {toast({ title: '授权失败，请重新授权' })}}})},// 获取用户信息async getUserInfo() {const { data } = await reqUserInfo()// 将用户信息存储到本地和 StoresetStorage('userInfo', data)this.setUserInfo(data)}}
})