登錄和獲取用戶(hù)信息是小程序中最基本的兩步操作，但是由于之前小程序官方開(kāi)始時(shí)的設(shè)計(jì)缺陷，導(dǎo)致很多開(kāi)發(fā)者將登錄和獲取用戶(hù)信息綁定使用，盡管后來(lái)小程序wx.getUserInfo接口調(diào)整為：在用戶(hù)未授權(quán)過(guò)的情況下調(diào)用此接口，將不再出現(xiàn)授權(quán)彈窗，會(huì)直接進(jìn)入 fail回調(diào)，但是改了之后，依舊有不少開(kāi)發(fā)者對(duì)這兩步的概念混淆不清，接下來(lái)這篇文章將會(huì)詳細(xì)介紹小程序這兩步操作

登錄

wx.login()用來(lái)做登錄的方法，調(diào)用接口獲取登錄憑證，code發(fā)送給后端用于置換session_key和openid等數(shù)據(jù)，接下來(lái)看看小程序的整個(gè)登錄流程是怎樣的：

這是小程序官方的一張登錄流程圖，現(xiàn)在就來(lái)解讀一下這個(gè)流程

• 前端wx.login()獲取code，調(diào)用后端接口，將得到的code發(fā)送到后端
• 后端調(diào)用微信接口服務(wù)，用appid+appsecret+code發(fā)送過(guò)去，置換到session_key+openid，以前是不能置換unionid的，但是現(xiàn)在在滿(mǎn)足以下條件可以置換到unionid
  

1. 在微信開(kāi)放平臺(tái)下存在同主體的App、公眾號(hào)、小程序
   
2. 用戶(hù)關(guān)注了某個(gè)相同主體公眾號(hào)，或曾經(jīng)在某個(gè)相同主體App、公眾號(hào)上進(jìn)行過(guò)微信登錄授權(quán)

同時(shí)滿(mǎn)足以上兩個(gè)條件就能拿到用戶(hù)unionid，這樣一來(lái)，就能在wx.login()準(zhǔn)確識(shí)別出用戶(hù)是誰(shuí)

• 自定登錄態(tài)與openid和session_key關(guān)聯(lián)，實(shí)際就是生成一個(gè)與openid，session_key關(guān)聯(lián)的token，下發(fā)給前端
• 前端將后端下發(fā)的token存入緩存，在后面的接口請(qǐng)求中帶上自定登錄態(tài)
  

以上就是小程序的整個(gè)登錄流程，可以看到其實(shí)并不是一定要wx.getUserInfo()才能拿到用戶(hù)的信息，在特定的條件下，通過(guò)wx.login()的調(diào)用拿到unionId也能后端數(shù)據(jù)庫(kù)里拿到用戶(hù)信息

獲取用戶(hù)信息

wx.getUserInfo()以前調(diào)用時(shí)是會(huì)彈出授權(quán)彈框的，根據(jù)用戶(hù)的授權(quán)與否進(jìn)入對(duì)應(yīng)的回調(diào)函數(shù)，但是后來(lái)微信發(fā)現(xiàn)開(kāi)發(fā)者濫用wx.getUserInfo()方法，不授權(quán)用戶(hù)信息不能使用小程序，現(xiàn)在就只能通過(guò)button組件open-type="getUserInfo"觸發(fā)授權(quán)彈窗，授權(quán)后能獲得用戶(hù)信息以及用戶(hù)信息的加密數(shù)據(jù)，將用戶(hù)信息的加密數(shù)據(jù)發(fā)送到后端，后端通過(guò)wx.login()的code置換到的session_key對(duì)加密數(shù)據(jù)進(jìn)行解密就能拿到用戶(hù)的完整信息，這一步其實(shí)是對(duì)第一步的補(bǔ)充，當(dāng)wx.login()無(wú)法確認(rèn)用戶(hù)的時(shí)候時(shí)候才會(huì)執(zhí)行到這一步，如果在wx.login()可以確認(rèn)用戶(hù)信息時(shí)，就可以不用執(zhí)行這一步，實(shí)現(xiàn)用戶(hù)的無(wú)感登錄。

注意點(diǎn)：根據(jù)小程序官方最近發(fā)布的文檔來(lái)看，小程序不能用戶(hù)進(jìn)入小程序時(shí)就彈登錄框要求用戶(hù)登錄才能體驗(yàn)小程序，這種操作審核會(huì)被拒，要用戶(hù)在體驗(yàn)一定的小程序功能后，才能引導(dǎo)用戶(hù)去登錄授權(quán)用戶(hù)信息，具體文檔地址

token過(guò)期重登

以往我們寫(xiě)網(wǎng)頁(yè)應(yīng)用時(shí)，當(dāng)后端下發(fā)的token失效時(shí)，請(qǐng)求接口會(huì)得到403錯(cuò)誤碼，然后前端接到返回的錯(cuò)誤碼時(shí)就會(huì)跳到登錄頁(yè)要求用戶(hù)重新登錄，但是在小程序當(dāng)token失效時(shí)，需要跳到一個(gè)登錄頁(yè)重新登錄嗎？明顯不需要，因?yàn)樾〕绦虮旧砭蜎](méi)有賬號(hào)密碼登錄，因此登錄失效了直接做一個(gè)無(wú)感的重登操作就行了，除非某些小程序在并沒(méi)有依賴(lài)微信的登錄信息，而是小程序里面內(nèi)置自己的用戶(hù)登錄信息，這時(shí)候就需要跳到一個(gè)登錄頁(yè)面進(jìn)行重登，但是這樣的小程序還是少數(shù)，接下來(lái)就來(lái)看看如何小程序是如何做無(wú)感重登的。

直接來(lái)看代碼：

const Fly = require('../libs/flyio')
const fly = new Fly()
const newFly = new Fly()
let time = 0
let baseUrl = 'xxxxx'
fly.interceptors.request.use((request) => {
  wx.showNavigationBarLoading()
  request.headers['token'] = wx.getStorageSync('token')
  request.baseURL = baseUrl
  return request
})
newFly.interceptors.request.use((request) => {
  wx.showNavigationBarLoading()
  request.headers['token'] = wx.getStorageSync('token')
  request.baseURL = baseUrl
  return request
})
fly.interceptors.response.use(
  (response, promise) => {
    wx.hideNavigationBarLoading()
    return promise.resolve(response.data)
  },
  function (err, promise) {
    wx.hideNavigationBarLoading()
    // session或者session_key失效的時(shí)候重新登錄
    if (err.status === 403) {
      //鎖定當(dāng)前實(shí)例，后續(xù)請(qǐng)求會(huì)在攔截器外排隊(duì)
      this.lock()
      // 當(dāng)出現(xiàn)未認(rèn)證的情況時(shí)重新登錄,超過(guò)三次拋出錯(cuò)誤
      if (time > 3) {
        time = 0
        return promise.reject(err.message + `(${err.status})`)
      }
      return new Promise((resolve, reject) => {
        wx.login({
          success: (e) => {
            let options = {
              'code': e.code
            }
            resolve(options)
          }
        })
      }).then((options) => {
        return newFly.post('/login', options).then(info => {
          wx.setStorageSync('token', info.token)
          time++
          //解鎖后，會(huì)繼續(xù)發(fā)起請(qǐng)求隊(duì)列中的任務(wù)
          this.unlock()
          // 重新請(qǐng)求失敗的請(qǐng)求
          return fly.request(err.request)
        })
      })
    }
  }
)

export {
  fly
}

上面的代碼展示的就是小程序token過(guò)期重登的過(guò)程，代碼不多，關(guān)鍵的地方也加上了注釋?zhuān)苋菀桌斫?，這里面最關(guān)鍵的就是使用了flyio這個(gè)網(wǎng)絡(luò)請(qǐng)求庫(kù)，利用這個(gè)庫(kù)做的過(guò)期重登，這是一個(gè)基于Promise的、強(qiáng)大的、支持多種JavaScript運(yùn)行時(shí)的http請(qǐng)求庫(kù)，可以使用一份http請(qǐng)求代碼在瀏覽器、微信小程序、Weex、Node、React Native、快應(yīng)用中都能正常運(yùn)行，在小程序中使用這個(gè)庫(kù)十分方便。這段代碼為了避免死循環(huán)，因此用了一個(gè)計(jì)數(shù)，超過(guò)三次就不會(huì)再重試登錄，直接拋錯(cuò)

總結(jié)

本篇文章主要介紹了小程序的登錄流程、獲取用戶(hù)信息、以及登錄過(guò)期重登的相關(guān)內(nèi)容，這里介紹的只是基礎(chǔ)的通用的流程，實(shí)際上每個(gè)小程序的業(yè)務(wù)可能不太一樣，因此在具體應(yīng)用需要根據(jù)具體業(yè)務(wù)再行調(diào)整。
如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶(hù)學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/25240.html