在小程序中,保持登錄狀態是很常見的需求,今天就把寫一寫使用uni-app框架的保持登錄狀態功能是怎樣實現的。
一、場景需求
1、場景:初始打開---登陸---關閉,再次打開---(已登錄)上次關閉前的頁面
2、cookie:傳統應用保持登錄狀態的方式是通過讀取 cookie 來判斷是否是登錄狀態,但是uni-app不支持對cookie的讀寫。
3、實現:uni-app 的官網的API 有這樣一欄“數據緩存”,而且uni-app框架的主體是 VUE,那么我們就用 uni.setStorage 和 vuex 進行登錄狀態管理。
二、實現過程
1、vuex的聲明和使用 請看 《uni-app 使用Vuex+ (強制)登錄》
2、在store/index.js 中
3、在App.vue
每次進入應用前,由App.vue 中的周期函數進行監聽,所以在加載函數中定義方法,從本地緩存中取出用戶數據,然后調用login方法,不需要發起網絡登錄請求。
這樣就實現了,只有不清除本地緩存,每次打開小程序應用時,都是登錄狀態
三、總結
看到文檔,有同步和異步這兩種緩存數據,那么關於同步緩存和異步緩存的區別:
以Sync結尾的都是都是同步緩存,二者的區別是,異步不會阻塞當前任務,同步緩存直到同步方法處理完才能繼續往下執行。
通俗點說,同步就是你下步操作需要上一步必須完成才能往下執行,異步就是下面的代碼和這個操作沒什么關系就用異步啦。
使用異步,性能會更好;而使用同步,數據會更安全。
1、所以在App.vue中,先是使用了let userInfo = uni.getStorageInfoSync('userInfo')||''; 同步去獲取緩存的數據,因為后續的操作依賴於更改storage后的數據,則需要同步。
2、在使用setStorageSync和setStorage的時發現setStorageSync不能傳入對象