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

登錄

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

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

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

1. 在微信開放平臺下存在同主體的App、公眾號、小程序
   
2. 用戶關注了某個相同主體公眾號，或曾經(jīng)在某個相同主體App、公眾號上進行過微信登錄授權

同時滿足以上兩個條件就能拿到用戶unionid，這樣一來，就能在wx.login()準確識別出用戶是誰

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

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

獲取用戶信息

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

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

token過期重登

以往我們寫網(wǎng)頁應用時，當后端下發(fā)的token失效時，請求接口會得到403錯誤碼，然后前端接到返回的錯誤碼時就會跳到登錄頁要求用戶重新登錄，但是在小程序當token失效時，需要跳到一個登錄頁重新登錄嗎？明顯不需要，因為小程序本身就沒有賬號密碼登錄，因此登錄失效了直接做一個無感的重登操作就行了，除非某些小程序在并沒有依賴微信的登錄信息，而是小程序里面內(nèi)置自己的用戶登錄信息，這時候就需要跳到一個登錄頁面進行重登，但是這樣的小程序還是少數(shù)，接下來就來看看如何小程序是如何做無感重登的。

直接來看代碼：

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失效的時候重新登錄
    if (err.status === 403) {
      //鎖定當前實例，后續(xù)請求會在攔截器外排隊
      this.lock()
      // 當出現(xiàn)未認證的情況時重新登錄,超過三次拋出錯誤
      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++
          //解鎖后，會繼續(xù)發(fā)起請求隊列中的任務
          this.unlock()
          // 重新請求失敗的請求
          return fly.request(err.request)
        })
      })
    }
  }
)

export {
  fly
}

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

總結

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

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