微信小程序登录授权详细流程介绍

微信小程序登录授权

一、需求介绍：

需要登录授权的页面必须要传递token 哪些页面需要token 商品中详情页：收藏，加入购物车我的：购物车页面 token值从哪里来？ 1.何为token:前端鉴权的一种方式，token由后端生成，token是有时效性 2.微信小程序登录授权拿到token

第一步：登录流程 参考文档： developers.weixin.qq.com/miniprogram… 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方法

注册时参考接口文档：api.it120.cc/doc.html#/%…

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
}

API工厂封装的数据请求接口说明文档： github.com/gooking/api…

API工厂封装的数据请求源码地址： github.com/gooking/api…

微信小程序登录授权详细流程介绍