携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

小程序登录流程

• 前端调用wx.login，会返回一个code
• 调用后台登录接口，把code传给后台。
• 后台拿到code之后去微信后台换取openid和sessionKey
• 再将token返回给前端，将token保存到本地
• 前端将token放到请求头中，每次请求后台的时候传给后台。
• 使用wx.getUserInfo获取用具的微信昵称，头像，需要用户同意授权。

用户登录

login() {
    var that = this;
    var token = that.globalData.token;
    // 如果有token
    if (token) {
      // 检查token是否有效
      wx.request({
        url: 'https',
        data: {
          token: token
        },
        success: function (res) {
          // token失效
          if (res.data.code != 0) {
            that.globalData.token = null;
            that.login(); // 重新登陆
          }
        }
      })
      return;
    }
    // 没有token 调用wx.login,请求后台，获取token
    wx.login({
      success: function (res) {
        wx.request({
          url: 'https',
          data: {
            code: res.code
          },
          success: function(res) {
            // code失效
            if (res.data.code == 10000) {
              // 注册
              that.registerUser();
              return;
            }
            // 返回失败
            if (res.data.code != 0) {
              // 登录错误 
              wx.hideLoading();
              wx.showModal({
                title: '提示',
                content: '无法登录，请重试',
                showCancel:false
              })
              return;
            }
            
            // 登录成功后保存token
            that.globalData.token = res.data.data.token;
            wx.setStorage({
              key: 'token',
              data: res.data.data.token
            })
          }
        })
      }
    })
  },

用户注册

第一次使用小程序的用户需要先注册，调用后台的注册接口，生成一个新的用户信息

  // 注册
  registerUser: function () {
    var that = this;
    wx.login({
      success: function (res) {
        var code = res.code; // 微信登录接口返回的code参数
        wx.getUserInfo({
          success: function (res) {
            var iv = res.iv;
            var encryptedData = res.encryptedData;
            wx.request({
              url: 'https',
              data: {
                  code:code,
                  encryptedData:encryptedData,
                  iv:iv
              }, // 设置请求的 参数
              success: (res) =>{
                wx.hideLoading();
                that.login();
              }
            })
          }
        })
      }
    })
  },
})

获取用户信息

一般我们登录时候会调用获取用户信息接口，获取用户的昵称和头像，需要用户授权同意（现在已经不返回了，说是为了安全。，建议在用户登录之后，在个人信息设置中完善昵称的头像）

getUserInfo:function() {
    wx.getUserInfo({
      success:(data) =>{
        this.globalData.userInfo = data.userInfo;
        wx.setStorage({
          key: 'userInfo',
          data:  data.userInfo
        })
        return this.globalData.userInfo;
      }
    })
},

app.js

在app.js,调用登录接口。

App({
  onLaunch: function () {
    console.log('App onLaunch');
    this.login();
    this.getUserInfo();
  },
   globalData:{
    userInfo:null,
    subDomain:"34vu54u7vuiuvc546d",
    token: null
  }

授权

有一些接口需要用户授权同意才能调用。用户对某个scope授权之后，就可以使用该范围内的接口。

• 使用wx.getSetting获取用户当前的授权状态。
• 当需要用户授权时候可以调用 wx.openSetting 打开设置界面，引导用户开启授权。