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

zsy888 發布于2021-09-26 09:55 / 3373人閱讀

摘要：由于微信小程序沒有一套身份驗證管理的框架，只提供等幾個，所以對于我這種初學者來說，小程序登陸狀態管理就顯得很麻煩。按照個人的理解，需要攜帶。總之，和只要其中之一不存在，都要把登陸狀態標記為未登陸。不然用戶不清楚不確定是否登陸成功。

業余水平第一次做小程序，進度非常慢，每天下班后也只有零碎的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要寫到緩存中
可以寫一個登陸頁面的模板，供各個頁面調用。當然，不寫模版似乎也沒啥問題，但必須，當前的界面在點擊授權登陸后，要有顯性的提示：登陸完成云云。不然用戶不清楚、不確定是否登陸成功。

云服務器 GPU云服務器小程序附近的小程序個人小程序和公司小程序的區別一個教你開發小程序的小程序小程序的用途

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/121117.html

大齡業余程序員要搞個django小程序--09--小程序登陸狀態維護之個人中心如何做數據加載

摘要：個人中心如何加載數據截圖中，顯性的數據有登陸我的積分瀏覽歷史我的收藏年會會員成為會員時則顯示會員到期時間以上幾個數據都是顯性的，即登陸后就要立刻顯示的。那么這個頁面數據的加載應這樣設計。 ...

gitmilk 2021-09-28 09:36 評論0 收藏0
30 歲的安卓程序員還有出路嗎，應該怎么規劃？

摘要：在舒伯的生涯階段里有個確立階段，歲歲。知識技術安卓程序員需要掌握編程語言應用框架開發工具等這些具體的知識和技術。技術能力與閱歷對安卓程序員來講，知識技術是一方面，是容易習得的，是較淺的層面。大齡程序員的界定老早網上有人說，安卓開發干不過30歲，后來又有人說干不過35歲，后來又有人說干不過...

不知名網友 2021-11-26 11:11 評論0 收藏0
Django搭建個人博客：結束和開始

摘要：教程看到這里，你已經學會如下內容搭建開發環境博文管理用戶管理發表評論若干小功能搭建簡單的小博客，以上的功能夠用了。教程為了起步平緩，沒有展開這方面的內容。陌生人，祝你學業進步事業有成歡迎常到杜賽的個人網站做客教程看到這里，你已經學會如下內容：搭建開發環境博文管理用戶管理發表評論若干小功能搭建簡單的小博客，以上的功能夠用了。相信你的志向不止于此。畢竟程序員面試個個造火...

zqhxuyuan 2019-07-30 18:42 評論0 收藏0
從國企到互聯網，一個初入職場將近一年半工作經驗程序員的「得」與「失」

摘要：寫在前面年月日，我只身一人來到北京，開始人生中的第一份工作，在一家國企從事軟件開發工作。因為現在晚飯都是在公司吃，如果不是刷朋友圈，我是不知道北京哪天的夕陽又刷屏了的，因此錯過了很多美麗的瞬間，也算一點遺憾吧。 ...

不知名網友 2021-11-26 11:11 評論0 收藏0
HTML5行業現狀與未來 - 2016年終大盤點

摘要：行業現狀與未來年終大盤點大幅動蕩后，即將進入平穩期前端，在年及以前，一直處于一種萌芽期的狀態當中，直至年才進入行業的成長期。 HTML5行業現狀與未來 - 2016年終大盤點 1. 大幅動蕩后，即將進入平穩期 HTML5（WEB前端），在2012年及以前，一直處于一種萌芽期的狀態當中，直至2013年才進入行業的成長期。HTML5（WEB前端）在2013和2014年，隨著行業的推動慢慢的...

mmy123456 2019-08-20 14:20 評論0 收藏0