最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

詳解小程序用戶登錄狀態(tài)檢查與更新實例

 更新時間:2019年05月15日 09:27:15   作者:scut_少東  
這篇文章主要介紹了小程序用戶登錄狀態(tài)檢查與更新實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

這篇文章主要解決以下問題:用戶每次登錄小程序(包括第一次使用)及點擊小程序的每個頁面的時候,我們?nèi)绾闻袛嗨斍暗牡卿洜顟B(tài)是否過期?如果過期,如何重新獲取用戶信息并發(fā)送至開發(fā)者服務器更新用戶信息,以及設置新的用戶登錄狀態(tài)?

將這個部分單獨作為一篇文章有兩個原因:

① wx.getUserInfo(OBJECT) 接口調整,廢棄了以前直接獲取用戶信息的方法;

② 上篇文章授權、登錄、session_key、unionId 只梳理了登錄流程而沒有貼實際的代碼,所以這篇文章以代碼實現(xiàn)為主。

1. 代碼邏輯分析

(1)用戶登錄態(tài)過期時間如何設置?

在上篇文章中也有提到過,用戶登錄態(tài)可以通過前端設置和后端設置兩種方式進行控制。這里我們在前端進行控制,即利用wx.checkSession() 接口來判斷session_key 是否過期來作為用戶登錄態(tài)是否過期的標志。如果過期了,則跳轉到統(tǒng)一的登錄頁面引導用戶點擊按鈕重新授權登錄,重新登錄之后session_key 會刷新,相當于在獲取用戶最新信息的同時重新設定了過期時間。

(2)onShow() 與onLoad()

小程序js 中有onShow 與onLoad 兩種事件。兩種事件的區(qū)別就在于onLoad 每次打開小程序只加載一次,跳轉到其他頁面再回來的時候這個事件就不會再觸發(fā)。而onShow 則每次進入頁面都會觸發(fā),所以我們在進入每個頁面檢查用戶登錄態(tài)是否過期的代碼需要放在onShow 中。

(3)重新登錄過程分析

如果用戶登錄態(tài)過期,則需要進行重新登錄。登錄過程在上篇文章中也有講過。這里再簡單梳理一下:前端引導用戶點擊按鈕觸發(fā)getUserInfo 獲取最新用戶信息 -> 前端調用wx.login() 獲取code -> 前端將code 發(fā)送給后端獲取openid 和seesion_key -> 后端寫session 并返回對應session 的唯一標志 -> 前端存儲這個唯一標志。

2. 代碼實例

在每個頁面的onShow 事件中添加以下代碼來檢查當前用戶登錄態(tài)是否過期:

wx.checkSession({
 success: function () {
 //session_key 未過期,并且在本生命周期一直有效
 return ;
 },
 fail: function () {
 // session_key 已經(jīng)失效,需要重新執(zhí)行登錄流程
 wx.navigateTo({
  url: "/pages/authorize/index"
 })
 }
})

因為進入每個頁面中都需要進行用戶登錄態(tài)是否過期的檢查,所以需要有一個公共的授權頁面,當檢查不同過的時候,就跳轉到這個授權頁面引導用戶重新進行授權,授權頁面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({
 
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: { },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) { },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
 */
 onReady: function () { },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
 */
 onShow: function () { },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
 */
 onHide: function () { },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面卸載
 */
 onUnload: function () { },
 
 /**
 * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
 */
 onPullDownRefresh: function () { },
 
 /**
 * 頁面上拉觸底事件的處理函數(shù)
 */
 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 重新執(zhí)行l(wèi)ogin 并將用戶信息發(fā)送到服務器端更新
  如果沒過期則返回
  如果沒登錄過則執(zhí)行l(wèi)ogin 并將用戶信息發(fā)送到服務器更新
 */
 checkSessionAndLogin: function () {
 let that = this;
 let thisOpenId = wx.getStorageSync('openid');
 
 // 已經(jīng)進行了登錄,檢查登錄是否過期
 if (thisOpenId) {
  console.log('have openid')
  wx.checkSession({
  success: function () {
   //session_key 未過期,并且在本生命周期一直有效
   wx.navigateBack({});
  },
  fail: function () {
   console.log('but session_key expired');
   // session_key 已經(jīng)失效,需要重新執(zhí)行登錄流程
   wx.removeStorageSync('openid');
   that.checkSessionAndLogin();
  }
  })
 } else {
  // 沒有進行登錄則先進行登錄操作
  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: '同步信息出錯~',
   })
  }
  }
 })
 }
})

以上所述是小編給大家介紹的小程序用戶登錄狀態(tài)檢查與更新實例詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關文章

  • JS實現(xiàn)讓訪問者自助選擇網(wǎng)頁文字顏色的方法

    JS實現(xiàn)讓訪問者自助選擇網(wǎng)頁文字顏色的方法

    這篇文章主要介紹了JS實現(xiàn)讓訪問者自助選擇網(wǎng)頁文字顏色的方法,涉及javascript針對radio表單控件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-02-02
  • JavaScript setTimeout()基本用法有哪些

    JavaScript setTimeout()基本用法有哪些

    這篇文章主要介紹了JavaScript setTimeout()基本用法有哪些,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-11-11
  • JS實現(xiàn)燈泡開關特效

    JS實現(xiàn)燈泡開關特效

    這篇文章主要為大家詳細介紹了JS實現(xiàn)燈泡開關特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法分析

    JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法分析

    這篇文章主要介紹了JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法,結合實例形式分析了JavaScript圖片上傳、編碼轉換等相關操作技巧,需要的朋友可以參考下
    2020-02-02
  • uniapp定義動畫的幾種方式總結

    uniapp定義動畫的幾種方式總結

    我們都知道,動畫其實是由一幀一幀圖片組成,快遞地播放一組圖片就形成了動畫,下面這篇文章主要給大家介紹了關于uniapp定義動畫的幾種方式,需要的朋友可以參考下
    2023-02-02
  • 詳解js創(chuàng)建對象的幾種方式和對象方法

    詳解js創(chuàng)建對象的幾種方式和對象方法

    這篇文章主要介紹了詳解js創(chuàng)建對象的幾種方式和對象方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-03-03
  • JavaScript計算兩個日期時間段內(nèi)日期的方法

    JavaScript計算兩個日期時間段內(nèi)日期的方法

    這篇文章主要介紹了JavaScript計算兩個日期時間段內(nèi)日期的方法,涉及javascript操作時間的技巧,需要的朋友可以參考下
    2015-03-03
  • uniapp實現(xiàn)微信H5掃碼功能的完整步驟

    uniapp實現(xiàn)微信H5掃碼功能的完整步驟

    在uni-app官網(wǎng)上發(fā)現(xiàn)uni-app不支持H5掃碼功能,但是下面的提示說明可以通過微信的JS-SDK實現(xiàn)掃碼功能,下面這篇文章主要給大家介紹了關于uniapp實現(xiàn)微信H5掃碼功能的完整步驟,需要的朋友可以參考下
    2022-11-11
  • 基于 Bootstrap Datetimepicker 聯(lián)動

    基于 Bootstrap Datetimepicker 聯(lián)動

    這篇文章主要介紹了基于bootstrap datetimepicker 聯(lián)動效果,需要的朋友可以參考下
    2017-08-08
  • 淺談JavaScript的計時器對象

    淺談JavaScript的計時器對象

    下面小編就為大家?guī)硪黄獪\談JavaScript的計時器對象。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦
    2016-12-12

最新評論

梁山县| 嘉义县| 平罗县| 彭山县| 富裕县| 高淳县| 浑源县| 清新县| 巴里| 秦安县| 瑞丽市| 九台市| 祁阳县| 迁西县| 铜山县| 宾阳县| 禄劝| 西华县| 元阳县| 荥经县| 西乡县| 叶城县| 英超| 泗阳县| 成都市| 盐津县| 江华| 洪泽县| 南丰县| 天峨县| 普定县| 曲麻莱县| 沭阳县| 榆树市| 宝坻区| 秦安县| 得荣县| 惠来县| 原阳县| 无棣县| 邯郸市|