WeChat小程序的登錄授權關於token

微信小程序登錄授權【重點也是難點】

1. 下載天使童裝項目源碼：https://github.com/EastWorld/wechat-app-mall
2. 需要登錄授權的頁面必須要傳遞token

哪些頁面需要token

商品中詳情頁：收藏，加入購物車
我的：
購物車頁面

token值從哪里來？

1.何為token:前端鑒權的一種方式，token由后端生成，token是有時效性
2.微信小程序登錄授權拿到token

   第一步：登錄流程
   參考文檔：
   https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
   wx.login()-->wx.request()-->后端--->騰訊服務
   
   前端-->后端-->騰訊服務器
   
   第二步：具體如何實現
   
     登錄--檢測是否注冊--沒注冊先獲取用戶信息先注冊（寫入公司數據庫）--然后再登錄
     
     (1)點擊封裝的登錄模塊中的”允許“按鈕---執行processLogin方法
     
        <button class="l" open-type="getUserInfo" bindgetuserinfo="processLogin">允許</button>
        
       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
}
    
    
   API工廠封裝的數據請求接口說明文檔：
   https://github.com/gooking/apifm-wxapi/blob/master/instructions.md
   
   API工廠封裝的數據請求源碼地址：
   https://github.com/gooking/apifm-wxapi/blob/dbc6981600737fd3bc5624bc2399f84b609faad4/src/index.js#L394
   

    
   

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6pRI53X5-1596903530186)(assets/image-20200808144209029.png)]