大齡業余程式員要搞個django小程式--08--深入理解小程式登陸狀態的維護

業余水平第一次做小程式，進度非常慢，每天下班后也只有零碎的1到2小時，一個小問題可以難倒我幾個晚上的時間，

由于微信小程式沒有一套身份驗證管理的框架，只提供wx.login、wx.getUserProfile等幾個api，所以對于我這種初學者來說，小程式登陸狀態管理就顯得很麻煩，經過這段時間的實踐，終于摸到了點門檻，先梳理幾個重要的資訊，

從用戶使用的層面理解小程式的登陸邏輯

小程式打開時，只會有兩種狀態

• 未登陸狀態，查看不到個人資訊
• 登陸狀態

那，當小程式載入時，依靠什么來判斷狀態呢？結合官方的檔案和實踐，我采用以下的邏輯判斷登陸狀態的設定：

1、sessionKey 是否過期，
2、本地是否有userInfo

經過實踐，以上兩項，只要有一項不滿足，都必須顯性地標識為未登陸，sessionKey都過期了，說明這個用戶很久沒登陸小程式了，有必要走一套登陸的流程，或者，本地連userInfo都沒來，即便標識為登陸，也沒用，沒有基礎的用戶資料的話，你顯示個毛線，

從開發的層面理解小程式的登陸邏輯

用戶為兩種狀態

• 已注冊
• 未注冊

需要考慮以下情況

• 請求中是否需要攜帶token，無token則需要驗openid，然后簽發token；token過期時通知小程式客戶端重新執行登陸操作
• 請求中是否需要攜帶code iv encryptedData ，按照個人的理解，需要攜帶，即wx.login(提供code)和getUserInfo(提供iv和encryptedData)配合使用，可以隨時做openid校驗和解密encryptedData資訊，

總結

1、小程式客戶端使用sessionKey 或 userInfo快取來決定用戶在小程式的登陸狀態；
而且，都可以在全域進行判斷，即專案根目錄的app.js

App({
	wx.checkSession({
      success: (res) => {//回傳:有效期內的提示},
      fail: (res) => {//回傳:過期的提示},
      complete: (res) => {},
    });
    
    let u = wx.getStorageSync('userInfo')
    console.log(u) //如果不存在，回傳的是空字符
    
})

上面并非業務代碼，只是做簡單的展示，實踐中可以考慮使用promise封裝起來，

總之，sessionKey和userInfo只要其中之一不存在，都要把登陸狀態標記為未登陸，

2、需要把登陸邏輯單獨封裝，方便在需要的時候使用，

export const wxGetUserProfile = () => {
  return new Promise((resolve, reject) => {
    // 登陸中提示
    wx.showLoading({
      title: '登陸中...',
      mask: true,
    })
    wx.getUserProfile({
      desc: '授權以提供進一步服務',
      lang: 'zh_CN',
      success: (result) => {
        resolve(result)
      },
      fail: (err) => {
        reject(err)
      },
      complete: (res) => {
        wx.hideLoading({})
      },
    })
  })
}

export const wxLogin = () => {
  return new Promise((resolve, reject) => {
    wx.login({
      success: (result) => {
        resolve(result)
      },
      fail: (err) => {
        reject(err)
      },
      complete: (res) => {
      },
    })
  })
}

使用Promise分別封裝wx.login和wx.getUserProfile，使用時要在使用的js中引入封裝的方法）

tapToLogin(e) {
    let p1 = wxLogin()
    let p2 = wxGetUserProfile()
    p1.then(code => {
      return code
    }).then(code => {
      return new Promise((resolve, reject) => {
        p2.then(res => {
          console.log('profile', res.userInfo);
          this.setData({
            userInfo: res.userInfo
          })
          wx.setStorageSync('userInfo', res.userInfo)
          resolve({
            code: code.code,
            iv: res.iv,
            encryptedData: res.encryptedData,
            userInfo: res.userInfo
          })
        }).catch(err => {
          reject(err)
        })
      })
    }).then(res => {
      // 使用封裝的request
      if (!wx.getStorageSync('token')) {
        request({
            url: HOST_API.menberLogin,
            method: "POST",
            data: {
              code: res.code,
              iv: res.iv,
              encryptedData: res.encryptedData
            }
          })
          .then(result => {
            wx.setStorageSync('token', result.data.context.token);
            this.setData({
              hasUserInfo: true,
              isLogin: result.data.context.is_login,
              isVip: result.data.context.is_vip,
              collection: result.data.context.collection,
              integration: result.data.context.integration,
              views: result.data.context.views
            })
            console.log('無頭的回傳：', result);
          })
      } else {
        request({
            url: HOST_API.menberLogin,
            method: "POST"
          })
          .then((result) => {
            console.log('有token的回傳：', result);
            this.setData({
              hasUserInfo: true,
              isLogin: result.data.context.is_login,
              isVip: result.data.context.is_vip,
              collection: result.data.context.collection,
              integration: result.data.context.integration,
              views: result.data.context.views
            })
          })
      }
    })
  },

未登陸狀態

登陸狀態

當然，在使用時還是存在邏輯上不清晰的情況，

3、設定的問題

• 將isLogin bool設定為全域變數，注意這個不能設定為快取，
• 將wx.checkSession和wx.getStorageSync('userInfo') 封裝好，可以在全域呼叫，可以在需要的環節進行呼叫，并且，必須相應地改更全域變數isLogin的值，
• token和userInfo要寫到快取中
• 可以寫一個登陸頁面的模板，供各個頁面呼叫，當然，不寫模版似乎也沒啥問題，但必須，當前的界面在點擊授權登陸后，要有顯性的提示：登陸完成云云，不然用戶不清楚、不確定是否登陸成功，