微信小程序 ---- 慕尚花坊 用户管理

01. 用户登录-什么是 token

什么��� Token

Token 是服务器生成的一串字符串，用作客户端发起请求的一个身份令牌。当第一次登录成功后，服务器生成一个 Token 便将此 Token 返回给客户端，客户端在接收到 Token 以后，会使用某种方式将 Token 保存到本地。以后客户端发起请求，只需要在请求头上带上这个 Token ，服务器通过验证 Token 来确认用户的身份，而无需再次带上用户名和密码。

**Token的具体流程 **

1. 客户端向服务器发起登录请求，服务端验证用户名与密码
2. 验证成功后，服务端会签发一个 Token，并将 Token 发送到客户端
3. 客户端收到 token 以后，将其存储起来，比如放在 localStorage 、sessionStorage 中
4. 客户端每次向服务器请求资源的时候需要带着服务端签发的 Token，服务端收到请求，然后去验证客户端请求里面带着的 Token ，如果验证成功，就向客户端返回请求的数据

02. 用户登录-小程序登录流程介绍

业务介绍：

传统的登录功能，需要用户先注册，注册完成以后，使用注册的账号、密码进行登录。

小程序的登录操作则比较简单，小程序可以通过微信提供的登录能力，便捷地获取微信提供的用户身份标识进行登录。

免去了注册和输入账号密码的步骤，从而提高了用户体验。

小程序登录图示：

登录流程说明：

1. 用户访问小程序，点击 [登录] ，调用 wx.login() 方法获取 临时登录凭证code

   临时登录凭证 code，就像是一个会过期的临时身份证一样，有效时间仅为 5分钟

2. 使用 wx.request() 方法将 临时登录凭证code 传递给开发者服务器，方便后续可以换取微信用户身份 id

3. 开发者的后台接收 临时登录凭证code，同时在微信公众后台拿到 AppId 和 AppSecret ，向微信服务器发送请求，

   请求参数合法的话，微信服务器会给开发者后台返回 openid(微信用户的唯一标识) 以及 session_key(会话密钥) 等

   openid 是微信用户的唯一标识，也就是微信用户身份 id，可以用这个 id 来区分不同的微信用户

   session_key 则是微信服务器给开发者服务器颁发的身份凭证，

   开发者可以用session_key请求微信服务器其他接口来获取一些其他信息

4. 开发者后台在接收到微信服务器返回的数据以后，会执行一些业务逻辑的处理，例如：将用户标识和其他信息进行加密处理，生成自定义登录态，这个登录态可以理解为就是 Token ，然后让 Token 与 openid 和 session_key 进行关联

5. 开发者后台处理好逻辑后，会将 自定义登录态 Token 返回给微信小程序客户端，客户端收到 token 以后，将其存储起来，比如放在 localStorage 中。

6. 客户端每次向开发者后台发送请求的时候，需要携带自定义登录态 Token ，开发者后台收到请求后，对 Token 进行验证识别用户身份，同时拿自定义登录态 Token 查询 openid 和 session_key，从而获取用户请求的数据，进行返回。

03. 用户登录-实现小程序登录功能

思路分析：

当用户没有登录的时候，需要点击个人中心的头像，跳转到登录页面进行登录。在登录成功以后，需要再次返回到个人中心页面

在登录页面我们使用了 Vant 提供的两个组件来进行页面结构的绘制

1. empty 组件：空状态时的占位提示
2. button 组件：按钮组件

给登录按钮绑定点击事件，在事件处理程序中，调用 wx.login 获取 临时登录凭证code ，

然后调用后端接口，将 临时登录凭证code 传递给后端

熟悉接口文档：微信登录

根据接口文档封装接口 API 函数，当点击授权登录按钮的时候调用 API 函数，在获取到 token 以后，将 token 存储到本地，然后跳转到登录之前的页面。

实现步骤：

1. 在 /api/user.js 文件中根据接口文档，创建登录的 API 函数 login
2. 给登录按钮绑定点击事件，对应 login 回调函数
3. 在 login 回调函数中调用 wx.login() 方法，获取临时登录凭证code
4. 在 /pages/login/login.js 中导入封装好的 API 函数，传入 临时登录凭证code 然后调用
5. 在登录成功以后将 token 存储到本地

落地代码：

➡️ /api/user.js

import http from '../utils/http'/** * @description 授权登录 * @param {*} code 临时登录凭证code * @returns Promise */export const reqLogin = (code) => {  return http.get(`/mall-api/weixin/wxLogin/${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: '授权失败，请稍后再试~~~' })        }      }    })  }})

04. 用户登录-token 存储到 Store

思路分析：

在上一节，我们已经将token存储到了本地，但是将 Token 直接存储到本地不方便对数据进行操作，要先从本地存储取出，然后在使用，关键的一点，存储到本地的数据不是响应式的，当本地存储里面的内容发生改变，页面不会发生改变。这时候我们就需要将 token 也存储到 Store 中，这一节，我们需要做的就是将 Token 存储到 Mobx 中。

Mobx允许开发人员在应用程序中统一管理所有组件之间的公共数据。通过使用 Mobx，开发人员可以轻松地将 token 存储到全局状态中，并实现在整个应用程序中的共享。并且，存储到Mobx中的数据是响应式的，数据发生了变化，使用的地方也会发生变化

首先我们先安装Mobx，然后进行实例化，在实例化的时候，创建共享的数据 Token，以及对 Token 修改的方法

然后使用 Component 构造页面，并导入ComponentWithStore 方法，并配置 storeBindings 方法让页面和 Store 对象关联

实现步骤：

1. 安装Mobx两个包，在安装好包以后，对包进行构建，点击 构建 npm
2. 在项目的根目录下创建 store 文件夹，然后在该文件夹下新建 userstore.js
3. 导入核心的observable 、action 方法，创建Store，同时声明数据和方法
4. 在登录页面，导入ComponentWithStore 方法，并配置 storeBindings 方法让页面和 Store 对象关联

落地代码：

安装依赖，安装完成后构建 npm

npm i mobx-miniprogram mobx-miniprogram-bindings

➡️ /store/index.js

// 导入 observable 函数用于创建可观察对象// 导入 action 修改 store 中的可观察状态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  })})

➡️ /pages/login/login.js

import { reqLogin } from '../../api/user'+ import { userStore } from '../../api/userstore'+ import { ComponentWithStore } from 'mobx-miniprogram-bindings'+ ComponentWithStore({    +   storeBindings: {+     store: userStore,+     fields: ['token'],+     actions: ['setToken']+   }+   methods: {    // 授权登录    login() {      // 使用 wx.login 获取用户的临时登录凭证 code      wx.login({        success: async ({ code }) => {          if (code) {            // 在获取到临时登录凭证 code 以后，需要传递给开发者服务器            const { data } = await reqLogin(code)            // 登录成功以后，需要将服务器响应的自定义登录态存储到本地            setStorage('token', data.token)              +             // 将数据存储到 store 对象中+             this.setToken(data.token)          } else {            toast({ title: '授权失败，请重新授权' })          }        }      })    }+   }})

05. 用户信息-用户信息存储到 Store

思路分析：

在这一节，我们需要调用接口获取用户的信息，在获取到数据以后，我们需要存储用户信息数据到本地，

用户信息可能会在多个地方使用到，为了方便对用户信息的获取和使用，我们依然将用户信息存储到store

我们首先在 store/index.js 中新增userInfo可观测字段，同时创建赋值和删除的action方法

然后熟悉接口文档：获取用户信息

在熟悉了接口文档以后，根据接口文档封装接口 API 函数

获取用户信息的接口需要使用 token，所以我们需要在登录成功以后，调用获取用户信息的接口

登录成功以后，将用户信息存储到本地，然后调用action方法，将用户信息存储到 Store

实现步骤：

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

2. 在 login.js 中使用映射 userInfo 数据和 setUserInfo 方法

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

4. 在 /pages/login/login.js 中导入封装好的获取商品列表的 API 函数

5. 创建 getUserInfo 方法，在 getUserInfo 方法中调用接口 API 函数 reqUserInfo

6. 在登录成功以后，调用getUserInfo 方法获取用户，然后将用户信息存到本地以及 Store

落地代码：

➡️ /api/user.js

/** * @description 获取用户信息 * @returns Promise */export const reqUserInfo = () => {  return http.get(`/mall-api/weixin/getuserInfo`)}

➡️ /store/userstore.js

// 导入 observable 函数用于创建可观察对象// 导入 action 修改 store 中的可观察状态import { observable, action } from 'mobx-miniprogram'import { getStorage } from '../utils/storage'// 创建 store 对象，存储应用的状态export const userStore = observable({  // 创建可观察状态 token  // token，登录令牌  token: getStorage('token') || '',+   // 用户信息+   userInfo: wx.getStorageSync('userInfo') || {},  // 对 token 进行修改  setToken: action(function (token) {    this.token = token  }),    +   // 设置用户信息+   setUserInfo: action(function (userInfo) {+     this.userInfo = userInfo+   })})

➡️/pages/login/login.js

// pages/login/login.js// 导入封装通用模块方法import { toast } from '../../utils/extendApi'// 导入本地存储 apiimport { setStorage } from '../../utils/storage'// 导入接口 API 函数+ import { reqLogin, reqUserInfo } from '../../api/user'// 导入 ComponentWithStore 方法import { ComponentWithStore } from 'mobx-miniprogram-bindings'// 导入 store 对象import { userStore } from '../../stores/userstore'// 使用 ComponentWithStore 方法替换 Component 方法构造页面ComponentWithStore({  // 让页面和 Store 对象建立关联  storeBindings: {    store: userStore,+     fields: ['token', 'userInfo'],+     actions: ['setToken', 'setUserInfo']  },  methods: {    // 授权登录    login() {      // 使用 wx.login 获取用户的临时登录凭证 code      wx.login({        success: async ({ code }) => {          if (code) {            // 在获取到临时登录凭证 code 以后，需要传递给开发者服务器            const { data } = await reqLogin(code)            // 登录成功以后，需要将服务器响应的自定义登录态存储到本地            setStorage('token', data.token)            // 将自定义登录态 token 存储到 Store 对象            this.setToken(data.token)              +           // 获取用户信息+           this.getUserInfo()          } else {            toast({ title: '授权失败，请重新授权' })          }        }      })    },            // 获取用户信息    async getUserInfo() {      const { data } = await reqUserInfo()      // 将用户信息存储到本地      setStorage('userInfo', data)+     // 将用户信息存储到 Store+     this.setUserInfo(data)    }  }})

06. 用户信息-使用数据渲染用户信息

思路分析：

在获取到数据以后，我们已经将用户信息数据存储到本地和Store

这一节我们需要从 Store 中取出用户信息数据，并渲染到页面上

个人中心页面展示用于展示个人信息

如果用户没有登录的时候，展示没有登录的头像、提示用户登录的文案信息，不展示设置按钮

如果用户已经登录，展示用户的头像和昵称，并且展示设置按钮，方便用户对收货地址、头像、昵称进行更改

实现步骤：

1. 在个人中心页面导入ComponentWithStore 方法构建页面
2. 配置 storeBindings 让组件和 Store 建立关联
3. 渲染页面

落地代码：

➡️/pages/info/info.js

+ import { ComponentWithStore } from 'mobx-miniprogram-bindings'+ ComponentWithStore({    +   storeBindings: {+     store: userStore,+     fields: ['token', 'userInfo']+   }})

➡️/pages/info/info.wxml

                +