小程序的登录流程和普通的登录流程是不同的

1、相关文档

指南 ---> 开发能力 ---> 用户信息 ---> 小程序登录 (opens new window)

API ---> 开发接口 ---> 登录 (opens new window)

2、OAuth2.0

  微信小程序是不同于其他应用的：它依托与微信 APP。

  所以，我们是不需要用户注册操作的，直接登录（静默登录）即可。

  其登录机制采用的是 Oauth2.0 的授权码模式，具体可以看看我的《node 笔记》部分。

3、登录流程

简单描述 ✍

• 前端通过 wx.login 获取 code，并将其发送给后端
• 后端通过 code、appid、appsecret 获取 opnId、session_key，并将其与当前项目关联，然后返回 token
• 前端将 token 存储到小程序 storage 中

这样，前端就可以和平时一样，发生网络请求（wx.request()）时携带 token 即可

import { renReq } from '../../service/require.js'

Page({
  onLoad() {
    const token = wx.getStorageSync("token") || ""
    // 检查token是否存在
    if(!token) {
      this.getToken()
    }
  },
  getToken() {
    // 1、获取code
    wx.login({
      success: (res) => {
        const code = res.code

        // 2、获取token
        wx.request({
          url: 'http://xxxxx:3000/login',
          data: { code },
          method: "post",
          success: (res) => {
            const token -= res.data.token

            // 3、存储token
            wx.setStorageSync("token", token)
          }
        })
      }
    })
  }
})

4、开发应用

• service / require.js

代码实现

class RenRequest {
  constructor(baseURL) {
    this.baseURL = baseURL
  }
  request(options) {
    const { url } = options
    return new Promise((resolve, reject) => {
      wx.request({
        ...options,
        url: this.baseURL + url,
        success: (res) => {
          resolve(res.data)
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
  }
  get(options) {
    return this.request({ ...options, method: 'get' })
  }
  post(options) {
    return this.request({ ...options, method: 'post' })
  }
}
export const renReq = new RenRequest('https://jsonplaceholder.typicode.com/')

export const loginReq = new RenRequest('https:/133.24.31.10:3000/')

• service / login.js

export function getCode() {
  return new Promise((resolve, reject) => {
    wx.login({
      success: (res) => {
        // const code = res.code
        resolve(res.code)
      }
    })
  })
}

• 使用

import { getCode } from '../../service/login'

import { loginReq } from '../../service/require.js'

App({
  onLoad() {
    const token = wx.getStorageSync('token') || ''
    // 检查token是否存在、检查token是否过期
    if (!token && this.verifyToken(token) !== 200) {
      this.getToken()
    }
  },

  async getToken() {
    // 1、获取code
    const code = await getCode()

    // 2、获取token
    const res = await loginReq.post({
      url: '/login',
      data: { code }
    })
    const token = res.data.token

    // 3、存储token
    wx.setStorageSync('token', token)
  },

  async verifyToken(token) {
    const res = await loginReq.post({
      url: '/auth',
      header: { token }
    })
    console.log(res)

    return res.status
  }
})