详解⼩程序⽤户登录状态检查与更新实例
这篇⽂章主要解决以下问题：⽤户每次登录⼩程序（包括第⼀次使⽤）及点击⼩程序的每个页⾯的时候，我们如何判断他当前的登录状态是否过期?如果过期，如何重新获取⽤户信息并发送⾄开发者服务器更新⽤户信息，以及设置新的⽤户登录状态？
将这个部分单独作为⼀篇⽂章有两个原因：
① wx.getUserInfo(OBJECT) 接⼝调整，废弃了以前直接获取⽤户信息的⽅法；
②上篇⽂章只梳理了登录流程⽽没有贴实际的代码，所以这篇⽂章以代码实现为主。
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.js
var app = getApp();
let Domain = app.globalData.domain;
Page({
/**
* 页⾯的初始数据
*/
data: { },
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) { },
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () { },
/
**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function () { },
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function () { },
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function () { },
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function () { },
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function () { },
json检查/**
* ⽤户点击右上⾓分享
*/
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 已经失效，需要重新执⾏登录流程
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 (de) {
url: Domain + '/user/wx_login',
data: {
code: de
},
success: function (res) {
res = res.data;
console.log(res)
/
/ 保存openId，并将⽤户信息发送给后端
if (de === 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;
url: Domain + '/user/updateUser',
method: 'POST',
dataType: 'json',
data: userInfo,
success: function (res) {
res = res.data;
if (de === 0) {
wx.navigateBack({});
} else {
wx.showModal({
title: 'Sorry',
content: '同步信息出错~',
})
}
}
})
}
})
以上所述是⼩编给⼤家介绍的⼩程序⽤户登录状态检查与更新实例详解整合，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论