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

在现代的移动应用中，用户登录与信息管理是构建个性化用户体验的基础。小程序作为轻量级的应用形式，在简化开发流程的同时，也需要我们妥善管理用户的登录状态与用户信息。本文将详细介绍如何在小程序中实现用户登录功能，并将用户信息存储到全局状态管理对象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)
    }
  }
})