详解小程序用户登录状态检查与更新实例


Posted in Javascript onMay 15, 2019

这篇文章主要解决以下问题:用户每次登录小程序(包括第一次使用)及点击小程序的每个页面的时候,我们如何判断他当前的登录状态是否过期?如果过期,如何重新获取用户信息并发送至开发者服务器更新用户信息,以及设置新的用户登录状态?

将这个部分单独作为一篇文章有两个原因:

① 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.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 () { },
 
 /**
 * 用户点击右上角分享
 */
 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: '同步信息出错~',
   })
  }
  }
 })
 }
})

以上所述是小编给大家介绍的小程序用户登录状态检查与更新实例详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
document.createElement()用法
Mar 13 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 #Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 #Javascript
JavaScript页面倒计时功能完整示例
May 15 #Javascript
vue组件间通信六种方式(总结篇)
May 15 #Javascript
JS正则表达式封装与使用操作示例
May 15 #Javascript
微信小程序实现授权登录
May 15 #Javascript
基于vue实现一个神奇的动态按钮效果
May 15 #Javascript
You might like
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
jQuery 表格工具集
2010/04/25 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python快排算法详解
2019/03/04 Python
python批量创建指定名称的文件夹
2019/03/21 Python
python之列表推导式的用法
2019/11/29 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
python进行参数传递的方法
2020/05/12 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
韩国商务邀请函
2014/01/14 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
Python实现拼音转换
2021/06/07 Python
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android