這篇文章主要解決以下問題：用戶每次登錄小程序（包括第一次使用）及點擊小程序的每個頁面的時候，我們如何判斷他當前的登錄狀態是否過期?如果過期，如何重新獲取用戶信息并發送至開發者服務器更新用戶信息，以及設置新的用戶登錄狀態？
將這個部分單獨作為一篇文章有兩個原因：
① wx.getUserInfo(OBJECT) 接口調整，廢棄了以前直接獲取用戶信息的方法；
② 上篇文章授權、登錄、session_key、unionId 只梳理了登錄流程而沒有貼實際的代碼，所以這篇文章以代碼實現為主。
1. 代碼邏輯分析
（1）用戶登錄態過期時間如何設置？
在上篇文章中也有提到過，用戶登錄態可以通過前端設置和后端設置兩種方式進行控制。這里我們在前端進行控制，即利用wx.checkSession() 接口來判斷session_key 是否過期來作為用戶登錄態是否過期的標志。如果過期了，則跳轉到統一的登錄頁面引導用戶點擊按鈕重新授權登錄，重新登錄之后session_key 會刷新，相當于在獲取用戶最新信息的同時重新設定了過期時間。
（2）onShow() 與onLoad()
小程序js 中有onShow 與onLoad 兩種事件。兩種事件的區別就在于onLoad 每次打開小程序只加載一次，跳轉到其他頁面再回來的時候這個事件就不會再觸發。而onShow 則每次進入頁面都會觸發，所以我們在進入每個頁面檢查用戶登錄態是否過期的代碼需要放在onShow 中。
（3）重新登錄過程分析
如果用戶登錄態過期，則需要進行重新登錄。登錄過程在上篇文章中也有講過。這里再簡單梳理一下：前端引導用戶點擊按鈕觸發getUserInfo 獲取最新用戶信息 -> 前端調用wx.login() 獲取code -> 前端將code 發送給后端獲取openid 和seesion_key -> 后端寫session 并返回對應session 的唯一標志 -> 前端存儲這個唯一標志。
2. 代碼實例
在每個頁面的onShow 事件中添加以下代碼來檢查當前用戶登錄態是否過期:
wx.checkSession({ success: function () { //session_key 未過期，并且在本生命周期一直有效 return ; }, fail: function () { // session_key 已經失效，需要重新執行登錄流程 wx.navigateTo({ url: "/pages/authorize/index" }) }})因為進入每個頁面中都需要進行用戶登錄態是否過期的檢查，所以需要有一個公共的授權頁面，當檢查不同過的時候，就跳轉到這個授權頁面引導用戶重新進行授權，授權頁面authorize 代碼如下：
wxml
<view class="container"> <view style='width:100%;padding-left:30rpx;font-size: 28rpx;margin-top:30rpx;'>1、同意當前小程序獲取我的微信頭像；</view> <view style='width:100%;padding-left:30rpx;font-size: 28rpx;margin-top:30rpx;'>2、同意當前小程序獲取我的微信昵稱等其他信息；</view> <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="save-btn">授權登錄</button></view>
wxss
page{ height: 100%;}.container{ background-color: #f5f5f9; justify-content: initial;}.save-btn{ width: 690rpx; height: 80rpx; line-height: 80rpx; text-align: center; margin-top:30rpx; border-radius: 6rpx; box-sizing: border-box; background-color: #e64340; color:#fff;}js
// pages/authorize/index.jsvar app = getApp();let Domain = app.globalData.domain;Page({ /** * 頁面的初始數據 */ data: { }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { }, bindGetUserInfo: function (e) { // 獲得最新的用戶信息 if (!e.detail.userInfo){ return; } wx.setStorageSync('userInfo', e.detail.userInfo) this.checkSessionAndLogin(); }, /* 這里使用openid 作為與后端session 連接的標志 檢查是否存在openid，即之前是否登錄過 如果登錄過，檢查session_key 是否過期 如果過期了，remove openid 重新執行login 并將用戶信息發送到服務器端更新 如果沒過期則返回 如果沒登錄過則執行login 并將用戶信息發送到服務器更新 */ checkSessionAndLogin: function () { let that = this; let thisOpenId = wx.getStorageSync('openid'); // 已經進行了登錄，檢查登錄是否過期 if (thisOpenId) { console.log('have openid') wx.checkSession({ success: function () { //session_key 未過期，并且在本生命周期一直有效 wx.navigateBack({}); }, fail: function () { console.log('but session_key expired'); // session_key 已經失效，需要重新執行登錄流程 wx.removeStorageSync('openid'); that.checkSessionAndLogin(); } }) } else { // 沒有進行登錄則先進行登錄操作 console.log('do not have openid'); that.loginAndGetOpenid(); } }, // 執行登錄操作并獲取用戶openId loginAndGetOpenid: function () { console.log('do login and get openid'); let that = this; wx.login({ success: function (res) { if (res.code) { wx.request({ url: Domain + '/user/wx_login', data: { code: res.code }, success: function (res) { res = res.data; console.log(res) // 保存openId，并將用戶信息發送給后端 if (res.code === 0) { wx.showModal({ title: 'set openid', content: res.data, }) wx.setStorageSync('openid', res.data); that.sendUserInfoToServer(); } else { wx.showModal({ title: 'Sorry', content: '用戶登錄失敗~', }) } } }) } } }) }, sendUserInfoToServer: function () { console.log('now send user info to server'); let userInfo = wx.getStorageSync('userInfo'); let thisOpenId = wx.getStorageSync('openid'); userInfo.openid =thisOpenId; wx.request({ url: Domain + '/user/updateUser', method: 'POST', dataType: 'json', data: userInfo, success: function (res) { res = res.data; if (res.code === 0) { wx.navigateBack({}); } else { wx.showModal({ title: 'Sorry', content: '同步信息出錯~', }) } } }) }})以上所述是小編給大家介紹的小程序用戶登錄狀態檢查與更新實例詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持！
新聞熱點
疑難解答
