微信小程序登录

微信小程序登录的一些个人理解，有不对的地方欢迎指出

在app页面onLaunch进来的时候，我希望是先判断授权。大致流程如图上所示，针对一些坑做一些简单介绍

请求在数据返回前发出问题

第一次进来的页面可能是首页，可能是很多个分享出去的页面。所以封装了登录注册

因为数据请求是异步的，解决这个问题通常是用promise，但是这个需求是跨页面的。

解决这个问题最简单的方法就是调用全局变量创建一个方法，这个方法在创建的时候是可以执行创建page下函数的

const that = this;
//判断token是否存在，是否已登录
if (!wx.getStorageSync('token')) {
      getApp().userInfoReadyCallback = () => {
        that.getData();
      }
    }else{
      that.getData();
    }

然后在登录成功的时候判断是否被创建

 if (getApp().userInfoReadyCallback) {
    getApp().userInfoReadyCallback()
 }

注册成功问题

第一次进来的页面可能是首页，可能是很多个分享出去的页面，所以我们应该用微信api的保留跳转授权页面wx.navigateTo和后退wx.navigateBack。而不是直接的页面跳转

细节

• 考虑到的客户进来完成注册和登录之后，就是每一页需要请求都直接缓存里读取用户信息。做了个后台返回token不正确的情况重新登录。所以把请求封装起来

 // 接口请求
  requests(url,data,methods){
    const that = this;
    let method = 'GET';
    if(methods){
      method = methods;
    }
    Toast.loading({
      message:'加载中...',
      duration:0
    })
      return new Promise ((resolve,reject) => {
          wx.request({
            url:that.globalData.requestUrl+url,
            data,
            method,
            success(res){
              Toast.clear();
              if(res.data.status){
               resolve(res)
              }else{
               Toast.fail(res.data.msg+'，请刷新页面重试！')
               // 请求token不正确，重新登录
               if(res.data.msg === 'token不正确'){
                 login()
               }
              }
            },
            fail(err){
              Toast.clear();
              Toast.fail('请求失败，请刷新页面重试！')
              reject(err)
            }
          })
      })
  },

• 所有的网络请求都有可能是请求失败的请求，做好提示
• 成功的提示建议放在封装的成功返回后，而不是调用时的then

部分代码

//app.js
onLaunch: function () { 
   const that = this;
    // 判断是否授权
    wx.getSetting({
      success(setting) {
        if (setting.authSetting['scope.userInfo']) {
          // 授权成功
          // 登录,成功提示封装在login.js里
          login().catch(err => {
            // 登录失败
            console.log(err)
          })

        } else {
          // 授权失败，跳转授权页面
          wx.navigateTo({
            url: '/pages/user/authorize/authorize',
          })
        }
      }
    })
  },

//login.js
//登录
export function login() {
  return new Promise(function (resolve, reject) {
    getApp().vants.Toast.loading({
      message: '登录中...',
      duration: 0
    })
    wx.login({
      success(res) {
        if (res.code) {
          // 登录请求
          wx.request({
            url: getApp().globalData.requestUrl + '/login/login/mini_login',
            data: {
              code: res.code
            },
            method: 'POST',
            success(res) {
              getApp().vants.Toast.clear();
              switch (res.data.flag) {
                case 0:
                  // 0未注册，去注册
                  register().catch(err=> {
                    getApp().vants.Toast.fail('失败！请重新尝试')
                  })
                  resolve(res)
                  break;
                case 1:
                  // 1登录成功，缓存用户信息，token
                  wx.setStorageSync('token', res.data.token)
                  wx.setStorageSync('userInfo', {
                    nickName: res.data.wx_user.nickname,
                    headImg: res.data.wx_user.head_img
                  }) 
                  // 判断数据是否在登录之前返回
                  if (getApp().userInfoReadyCallback) {
                    getApp().userInfoReadyCallback()
                  }
                  resolve(res)
                  break;
                case 2:
                  // 2登录成功，没有token
                  getApp().vants.Toast.fail('登录失败，没有获取到数据信息!请重试')
                  resolve(res)
                  break;
                default:
                  getApp().vants.Toast.fail('登录失败，请重试')
                  reject(res)
                  break;
              }
            },
            fail(err) {
              getApp().vants.Toast.clear();
              getApp().vants.Toast.fail('登录失败，请重试')
              reject(err)
            }
          })
        } else {
          reject('登录失败!获取登录码失败')
        }
      }
    })
  })
}
//注册
export function register() {
  return new Promise((resolve, reject) => {
    getApp().vants.Toast.loading({
      message: '注册中...',
      duration: 0
    })
    // 获取用户码
    wx.login({
      success(codes) {
        // 获取用户信息
        wx.getUserInfo({
          withCredentials: true,
          success(info) {
            let code = codes.code
            let iv = info.iv;
            let encryptedData = info.encryptedData;
            // 注册请求
            wx.request({
              url: getApp().globalData.requestUrl + '/login/login/mini_register',
              data: {
                code,
                iv,
                encryptedData
              },
              method: 'POST',
              success(res) {
                getApp().vants.Toast.clear()
                switch (res.data.flag) {
                  case 0:
                    // 授权失败
                    getApp().vants.Toast.fail('授权失败！请打开授权')
                    reject(res)
                    break;
                  case 1:
                    // 注册成功
                    login().then(()=>{
                      wx.navigateBack({
                        delta:1
                        })
                    }).catch(err => {
                      getApp().vants.Toast.fail('失败！请重新尝试')
                    });
                    resolve(res)
                    break;
                  case 2:
                    // 已注册
                    login().then(() => {
                      wx.navigateBack({
                        delta: 1
                      })
                      }).catch(err => {
                        getApp().vants.Toast.fail('失败！请重新尝试')
                      })
                    resolve(res)
                    break;
                  default:
                    getApp().vants.Toast.fail('注册失败！请重试')
                    reject(res)
                    break;
                }
              },
              fail() {
                getApp().vants.Toast.fail('注册失败！请重试')
              }
            })
          },
          fail(err) {
            reject(err, '注册获取用户信息失败')
          }
        })
      }
    })
  })
}