微信小程序如何实现登陆功能

之前的博客写到了微信小程序如何封装api

博客地址：https://blog.csdn.net/dd602350527/article/details/106103112

api中代码（举例）：

  /**
   * 登录接口
   */
  login: (code) => {
    return request('/user/wxapp/login', 'POST', { code: code }, true);
  },

  /**
   * 注册接口
   */
  enroll: (code, encryptedData, iv) => {
    return request('/user/wxapp/register/complex', 'POST', { code, encryptedData, iv }, true);
  },

登录流程

1、首先通过wx.login获取code值，利用wx.getUserInfo获取用户信息，调用注册接口，把新用户信息添加到后台数据库。

getUserInfo() {
    wx.login({
      complete: (res) => {
        // console.log(res)
        let code = res.code

        //获取用户信息
        wx.getUserInfo({
          complete: (res) => {
            // console.log(res)
            let iv = res.iv
            let encryptedData = res.encryptedData
            this.setData({
              userInfo: JSON.parse(res.rawData)
            })
            console.log(this.data.userInfo)

            //注册调用
            enroll(code, encryptedData, iv).then(res => {
              // console.log(res)

              //调用登录
              this.getUser()
            })
          },
        })
      },
    })
    

2、再次通过wx.login获取新的code值，调用后台登录接口传入code值获取token完成登录（把token存储到浏览器中）。

 getUser() {
    wx.login({
      complete: (res) => {
        // console.log(res)
        let code = res.code
        login(code).then(res => {
          // console.log(res)
          let token = res.data.data.token
          if (token) {
            wx.setStorageSync('token', token)
          } else {
            this.setData({
              flag: false
            })
          }
        })
      },
    })
  }
  

3、退出登录，删除浏览器存储的token。

out() {
    wx.removeStorageSync('token')
    this.setData({
      flag: true
    })
  }
  

注：此处需要获取两次code值，一次用来完成注册，一次用来完成登录。

代码中的flag用来控制登录弹窗组件的显示/隐藏