詳解小程序用戶登錄狀態(tài)檢查與更新實(shí)例
這篇文章主要解決以下問(wèn)題:用戶每次登錄小程序(包括第一次使用)及點(diǎn)擊小程序的每個(gè)頁(yè)面的時(shí)候,我們?nèi)绾闻袛嗨?dāng)前的登錄狀態(tài)是否過(guò)期?如果過(guò)期,如何重新獲取用戶信息并發(fā)送至開(kāi)發(fā)者服務(wù)器更新用戶信息,以及設(shè)置新的用戶登錄狀態(tài)?
將這個(gè)部分單獨(dú)作為一篇文章有兩個(gè)原因:
① wx.getUserInfo(OBJECT) 接口調(diào)整,廢棄了以前直接獲取用戶信息的方法;
② 上篇文章授權(quán)、登錄、session_key、unionId 只梳理了登錄流程而沒(méi)有貼實(shí)際的代碼,所以這篇文章以代碼實(shí)現(xiàn)為主。
1. 代碼邏輯分析
(1)用戶登錄態(tài)過(guò)期時(shí)間如何設(shè)置?
在上篇文章中也有提到過(guò),用戶登錄態(tài)可以通過(guò)前端設(shè)置和后端設(shè)置兩種方式進(jìn)行控制。這里我們?cè)谇岸诉M(jìn)行控制,即利用wx.checkSession() 接口來(lái)判斷session_key 是否過(guò)期來(lái)作為用戶登錄態(tài)是否過(guò)期的標(biāo)志。如果過(guò)期了,則跳轉(zhuǎn)到統(tǒng)一的登錄頁(yè)面引導(dǎo)用戶點(diǎn)擊按鈕重新授權(quán)登錄,重新登錄之后session_key 會(huì)刷新,相當(dāng)于在獲取用戶最新信息的同時(shí)重新設(shè)定了過(guò)期時(shí)間。
(2)onShow() 與onLoad()
小程序js 中有onShow 與onLoad 兩種事件。兩種事件的區(qū)別就在于onLoad 每次打開(kāi)小程序只加載一次,跳轉(zhuǎn)到其他頁(yè)面再回來(lái)的時(shí)候這個(gè)事件就不會(huì)再觸發(fā)。而onShow 則每次進(jìn)入頁(yè)面都會(huì)觸發(fā),所以我們?cè)谶M(jìn)入每個(gè)頁(yè)面檢查用戶登錄態(tài)是否過(guò)期的代碼需要放在onShow 中。
(3)重新登錄過(guò)程分析
如果用戶登錄態(tài)過(guò)期,則需要進(jìn)行重新登錄。登錄過(guò)程在上篇文章中也有講過(guò)。這里再簡(jiǎn)單梳理一下:前端引導(dǎo)用戶點(diǎn)擊按鈕觸發(fā)getUserInfo 獲取最新用戶信息 -> 前端調(diào)用wx.login() 獲取code -> 前端將code 發(fā)送給后端獲取openid 和seesion_key -> 后端寫(xiě)session 并返回對(duì)應(yīng)session 的唯一標(biāo)志 -> 前端存儲(chǔ)這個(gè)唯一標(biāo)志。
2. 代碼實(shí)例
在每個(gè)頁(yè)面的onShow 事件中添加以下代碼來(lái)檢查當(dāng)前用戶登錄態(tài)是否過(guò)期:
wx.checkSession({
success: function () {
//session_key 未過(guò)期,并且在本生命周期一直有效
return ;
},
fail: function () {
// session_key 已經(jīng)失效,需要重新執(zhí)行登錄流程
wx.navigateTo({
url: "/pages/authorize/index"
})
}
})
因?yàn)檫M(jìn)入每個(gè)頁(yè)面中都需要進(jìn)行用戶登錄態(tài)是否過(guò)期的檢查,所以需要有一個(gè)公共的授權(quán)頁(yè)面,當(dāng)檢查不同過(guò)的時(shí)候,就跳轉(zhuǎn)到這個(gè)授權(quán)頁(yè)面引導(dǎo)用戶重新進(jìn)行授權(quán),授權(quán)頁(yè)面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>
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.js
var app = getApp();
let Domain = app.globalData.domain;
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: { },
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) { },
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
*/
onReady: function () { },
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () { },
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
*/
onHide: function () { },
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
*/
onUnload: function () { },
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
*/
onPullDownRefresh: function () { },
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () { },
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () { },
bindGetUserInfo: function (e) {
// 獲得最新的用戶信息
if (!e.detail.userInfo){
return;
}
wx.setStorageSync('userInfo', e.detail.userInfo)
this.checkSessionAndLogin();
},
/*
這里使用openid 作為與后端session 連接的標(biāo)志
檢查是否存在openid,即之前是否登錄過(guò)
如果登錄過(guò),檢查session_key 是否過(guò)期
如果過(guò)期了,remove openid 重新執(zhí)行l(wèi)ogin 并將用戶信息發(fā)送到服務(wù)器端更新
如果沒(méi)過(guò)期則返回
如果沒(méi)登錄過(guò)則執(zhí)行l(wèi)ogin 并將用戶信息發(fā)送到服務(wù)器更新
*/
checkSessionAndLogin: function () {
let that = this;
let thisOpenId = wx.getStorageSync('openid');
// 已經(jīng)進(jìn)行了登錄,檢查登錄是否過(guò)期
if (thisOpenId) {
console.log('have openid')
wx.checkSession({
success: function () {
//session_key 未過(guò)期,并且在本生命周期一直有效
wx.navigateBack({});
},
fail: function () {
console.log('but session_key expired');
// session_key 已經(jīng)失效,需要重新執(zhí)行登錄流程
wx.removeStorageSync('openid');
that.checkSessionAndLogin();
}
})
} else {
// 沒(méi)有進(jìn)行登錄則先進(jìn)行登錄操作
console.log('do not have openid');
that.loginAndGetOpenid();
}
},
// 執(zhí)行登錄操作并獲取用戶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,并將用戶信息發(fā)送給后端
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: '同步信息出錯(cuò)~',
})
}
}
})
}
})
以上所述是小編給大家介紹的小程序用戶登錄狀態(tài)檢查與更新實(shí)例詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JS實(shí)現(xiàn)讓訪問(wèn)者自助選擇網(wǎng)頁(yè)文字顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)讓訪問(wèn)者自助選擇網(wǎng)頁(yè)文字顏色的方法,涉及javascript針對(duì)radio表單控件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript setTimeout()基本用法有哪些
這篇文章主要介紹了JavaScript setTimeout()基本用法有哪些,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
JS實(shí)現(xiàn)燈泡開(kāi)關(guān)特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)燈泡開(kāi)關(guān)特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10
JS+HTML實(shí)現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法分析
這篇文章主要介紹了JS+HTML實(shí)現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法,結(jié)合實(shí)例形式分析了JavaScript圖片上傳、編碼轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
uniapp定義動(dòng)畫(huà)的幾種方式總結(jié)
我們都知道,動(dòng)畫(huà)其實(shí)是由一幀一幀圖片組成,快遞地播放一組圖片就形成了動(dòng)畫(huà),下面這篇文章主要給大家介紹了關(guān)于uniapp定義動(dòng)畫(huà)的幾種方式,需要的朋友可以參考下2023-02-02
詳解js創(chuàng)建對(duì)象的幾種方式和對(duì)象方法
這篇文章主要介紹了詳解js創(chuàng)建對(duì)象的幾種方式和對(duì)象方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JavaScript計(jì)算兩個(gè)日期時(shí)間段內(nèi)日期的方法
這篇文章主要介紹了JavaScript計(jì)算兩個(gè)日期時(shí)間段內(nèi)日期的方法,涉及javascript操作時(shí)間的技巧,需要的朋友可以參考下2015-03-03
uniapp實(shí)現(xiàn)微信H5掃碼功能的完整步驟
在uni-app官網(wǎng)上發(fā)現(xiàn)uni-app不支持H5掃碼功能,但是下面的提示說(shuō)明可以通過(guò)微信的JS-SDK實(shí)現(xiàn)掃碼功能,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)微信H5掃碼功能的完整步驟,需要的朋友可以參考下2022-11-11
基于 Bootstrap Datetimepicker 聯(lián)動(dòng)
這篇文章主要介紹了基于bootstrap datetimepicker 聯(lián)動(dòng)效果,需要的朋友可以參考下2017-08-08
淺談JavaScript的計(jì)時(shí)器對(duì)象
下面小編就為大家?guī)?lái)一篇淺談JavaScript的計(jì)時(shí)器對(duì)象。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-12-12

