详解小程序用户登录状态检查与更新实例详解小程序用户登录状态检查与更新实例
这篇文章主要解决以下问题:用户每次登录小程序(包括第一次使用)及点击小程序的每个页面的时候,我们如何判断他当前
的登录状态是否过期?如果过期,如何重新获取用户信息并发送至开发者服务器更新用户信息,以及设置新的用户登录状态?
将这个部分单独作为一篇文章有两个原因:
① 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;
评论0