用户登录与信息管理：实现小程序登录与用户信息存储
在现代的移动应用中，用户登录与信息管理是构建个性化用户体验的基础。小程序作为轻量级的应用形式，在简化开发流程的同时，也需要我们妥善管理用户的登录状态与用户信息。本文将详细介绍如何在小程序中实现用户登录功能，并将用户信息存储到全局状态管理对象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({
// 创建可观察状态 token
token: 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 并设置 token
wx.setStorageSync('token', data.token)
this.setToken(data.token)
// 获取用户信息
this.getUserInfo()
} else {
toast({ title: '授权失败，请重新授权' })
}
}
})
},
// 获取用户信息
async getUserInfo() {
const { data } = await reqUserInfo()
// 将用户信息存储到本地和 Store
setStorage('userInfo', data)
this.setUserInfo(data)
}
}
})
总结
通过上述步骤，我们成功实现了小程序的用户登录功能，并将用户信息存储到了全局状态管理对象Store中。这不仅能够简化用户信息的访问，还能提升应用在不同页面之间传递数据的效率。利用MobX进行全局状态管理，我们能够更好地管理应用的复杂状态，为用户提供更加流畅和个性化的体验。
