這篇文章主要解決以下問題:用戶每次登錄小程序(包括第一次使用)及點擊小程序的每個頁面的時候,我們?nèi)绾闻袛嗨?dāng)前的登錄狀態(tài)是否過期?如果過期,如何重新獲取用戶信息并發(fā)送至開發(fā)者服務(wù)器更新用戶信息,以及設(shè)置新的用戶登錄狀態(tài)?
將這個部分單獨作為一篇文章有兩個原因:
① wx.getUserInfo(OBJECT) 接口調(diào)整,廢棄了以前直接獲取用戶信息的方法;
② 上篇文章授權(quán)、登錄、session_key、unionId 只梳理了登錄流程而沒有貼實際的代碼,所以這篇文章以代碼實現(xiàn)為主。
1. 代碼邏輯分析
(1)用戶登錄態(tài)過期時間如何設(shè)置?
在上篇文章中也有提到過,用戶登錄態(tài)可以通過前端設(shè)置和后端設(shè)置兩種方式進(jìn)行控制。這里我們在前端進(jìn)行控制,即利用wx.checkSession() 接口來判斷session_key 是否過期來作為用戶登錄態(tài)是否過期的標(biāo)志。如果過期了,則跳轉(zhuǎn)到統(tǒng)一的登錄頁面引導(dǎo)用戶點擊按鈕重新授權(quán)登錄,重新登錄之后session_key 會刷新,相當(dāng)于在獲取用戶最新信息的同時重新設(shè)定了過期時間。
(2)onShow() 與onLoad()
小程序js 中有onShow 與onLoad 兩種事件。兩種事件的區(qū)別就在于onLoad 每次打開小程序只加載一次,跳轉(zhuǎn)到其他頁面再回來的時候這個事件就不會再觸發(fā)。而onShow 則每次進(jìn)入頁面都會觸發(fā),所以我們在進(jìn)入每個頁面檢查用戶登錄態(tài)是否過期的代碼需要放在onShow 中。
(3)重新登錄過程分析
如果用戶登錄態(tài)過期,則需要進(jìn)行重新登錄。登錄過程在上篇文章中也有講過。這里再簡單梳理一下:前端引導(dǎo)用戶點擊按鈕觸發(fā)getUserInfo 獲取最新用戶信息 -> 前端調(diào)用wx.login() 獲取code -> 前端將code 發(fā)送給后端獲取openid 和seesion_key -> 后端寫session 并返回對應(yīng)session 的唯一標(biāo)志 -> 前端存儲這個唯一標(biāo)志。
2. 代碼實例
在每個頁面的onShow 事件中添加以下代碼來檢查當(dāng)前用戶登錄態(tài)是否過期:
wx.checkSession({ success: function () { //session_key 未過期,并且在本生命周期一直有效 return ; }, fail: function () { // session_key 已經(jīng)失效,需要重新執(zhí)行登錄流程 wx.navigateTo({ url: "/pages/authorize/index" }) }})因為進(jìn)入每個頁面中都需要進(jìn)行用戶登錄態(tài)是否過期的檢查,所以需要有一個公共的授權(quán)頁面,當(dāng)檢查不同過的時候,就跳轉(zhuǎn)到這個授權(quán)頁面引導(dǎo)用戶重新進(jìn)行授權(quán),授權(quán)頁面authorize 代碼如下:
wxml
<view class="container"> <view style='width:100%;padding-left:30rpx;font-size: 28rpx;margin-top:30rpx;'>1、同意當(dāng)前小程序獲取我的微信頭像;</view> <view style='width:100%;padding-left:30rpx;font-size: 28rpx;margin-top:30rpx;'>2、同意當(dāng)前小程序獲取我的微信昵稱等其他信息;</view> <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="save-btn">授權(quán)登錄</button></view>
新聞熱點
疑難解答
圖片精選