微信小程序如何登录授权

官方时序图如下：

官方地址如下： https://github.com/EastWorld/wechat-app-mall

首先我们要知道哪些页面需要token，token值从哪里来？怎么样才能拿到token，token有什么作用？
1.token主要有两个作用：①：防止表单重复提交(防止表单重复提交一般还是使用前后端都限制的方式，比如：在前端点击提交之后，将按钮置为灰色，不可再次点击，然后客户端和服务端的token各自独立存储，客户端存储在Cookie或者Form的隐藏域（放在Form隐藏域中的时候，需要每个表单）中，服务端存储在Session（单机系统中可以使用）或者其他缓存系统（分布式系统可以使用）中。)
2.使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的：
1.客户端使用用户名跟密码请求登录
2.服务端收到请求，去验证用户名与密码
3.验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
4.客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
5.客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
6.服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据
第一步：登录流程
参考文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
wx.login()–>wx.request()–>后端—>腾讯服务

前端–>后端–>腾讯服务器

第二步：具体如何实现

 登录--检测是否注册--没注册先获取用户信息先注册（写入公司数据库）--然后再登录
 
 (1)点击封装的登录模块中的”允许“按钮---执行processLogin方法

允许

processLogin代码如下：

  processLogin(e) {
    //如果没有用户userInfo
    if (!e.detail.userInfo) {
      wx.showToast({
        title: '已取消',
        icon: 'none',
      })
      return;
    }

  //如果

用userInfo，则调用register注册方法

   AUTH.register(this);
  }

(2)register方法

注册时参考接口文档：https://api.it120.cc/doc.html#/%E5%89%8D%E7%AB%AFapi%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/registerComplexUsingPOST_7

async function register(page) {
  let _this = this;
  wx.login({
    success: function (res) {
      let code = res.code; // 

微信登录接口返回的 code 参数，下面注册接口需要用到

    //微信小程序内置获取用户信息的api方法
      wx.getUserInfo({
        success: function (res) {
          console.log('getUserInfo：：：：：：',res)
          let iv = res.iv; //加密值
          let encryptedData = res.encryptedData; //包括敏感数据在内的完整用户信息的加密数据
          let referrer = '' // 推荐人
          let referrer_storge = wx.getStorageSync('referrer');
          if (referrer_storge) {
            referrer = referrer_storge;
          }
          // 下面开始调用注册接口，用咱们封装调用接口方法去注册
          WXAPI.register_complex({
            code: code,
            encryptedData: encryptedData,
            iv: iv,
            referrer: referrer
          }).then(function (res) {
            console.log('登录注册成功状态：',res)
            _this.login(page);
          })
        }
      })
    }
  })
}
   
  

  （3）执行登录login方法 

async function login(page){
  const _this = this
  wx.login({
    success: function (res) {
      WXAPI.login_wx(res.code).then(function (res) {  
        console.log('登录成功后返回结果：：：：：：',res)      
        if (res.code == 10000) {
          // 去注册
          //_this.register(page)
          return;
        }
        if (res.code != 0) {
          // 登录错误
          wx.showModal({
            title: '无法登录',
            content: res.msg,
            showCancel: false
          })
          return;
        }

      

登录成功将后端
返回的token和uid存储到本地缓存中

       wx.setStorageSync('token', res.data.token)
        wx.setStorageSync('uid', res.data.uid)

        //如果有page,则重新刷新page对应的页面，或用wx.navigaterTo()
        if ( page ) {
          page.onShow()
          
        }
      })
    }
  })
}

下面两个方法主要用于检测登录态和token是否过期

1.只检测登录态（检测微信返回）

async function checkSession(){
  return new Promise((resolve, reject) => {
    wx.checkSession({
      success() {
        return resolve(true)
      },
      fail() {
        return resolve(false)
      }
    })
  })
}

总体检测登录状态，包括token和微信登录态 返回 true 或false

async function checkHasLogined() {
  //获取本地存储的token
  const token = wx.getStorageSync('token')
  //如果没有token，直接返回false
  if (!token) {
    return false
  }

  //

检测微信登录态
/**

• 调用成功说明当前 session_key 未过期，调用失败说明 session_key 已过期
  */
  const loggined = await checkSession()

//如果没有登录态，则移除token,并返回false

  if (!loggined) {
    wx.removeStorageSync('token')
    return false
  }

  //检测登录token是否有效
  const checkTokenRes = await WXAPI.checkToken(token)

  //如果登录token无效，移除token并返回false
  if (checkTokenRes.code != 0) {
    wx.removeStorageSync('token')
    return false
  }
  
 

如果有token并且有效，并且微信登录态也有效则返回true
return true
}