應用中,保持登錄狀態是常見需求,本文講解使用uni-app框架時如何保持用戶登錄狀態。
即:初次進入應用為未登錄狀態------->登錄---------->關閉應用,再次打開--------->為已登錄狀態
傳統應用保持登錄狀態的方式是通過讀取 cookie 來判斷是否是登錄狀態,但是uni-app不支持對cookie的讀寫。因為uni-app框架的主體是 VUE,所以可以使用 vuex 進行登錄態管理。
關於vuex中定義的全局變量和方法需要定義在指定目錄的文件內。
即在項目目錄下新建名稱為 store 的目錄,目錄下創建用於定義全局變量和方法的 js 文件,如下圖:
index.js文件內容如下圖所示:
想要定義的這個 js 文件中的變量和方法能在各個頁面使用並生效,需要先在項目目錄下的 main.js 文件中導入這個 js 文件並聲明方法,如下圖所示:
聲明結束后就可以在頁面中監控全局變量和相應方法了,下面在一個登錄頁面中具體展示。
先在頁面導入vuex的方法,如下:
然后,在 computed 計算屬性方法中使用 mapState 對全局變量進行監控,在 method中使用 mapMutations 進行全局方法監控,如下所示:
定義登錄成功后跳轉到個人中心的函數,如下:
網絡請求成功后,在回調函數 success 中調用該方法,並把回調函數的返回值數據傳給 login 方法,如下:
隨后 index.js 文件中的login方法會把傳過來的用戶數據保存在本地緩存中。
app沒等進入應用時由APP.vue文件中的周期函數對app進行監聽,所以在加載函數中定義方法,從本地緩存中取出用戶數據進行登錄,這樣只要不清除本地緩存,每次打開應用的時候都會時登錄狀態,不需要反復發起網絡登錄請求,如下:
/******************************關於此種登錄態管理方法遇到的問題和解決方法補充說明*********************************
*******************************2019/12/11************************************************************************************
*******************************Edward***************************************************************************************/
由於此種方式是把第一次登陸的用戶賬戶信息保存在本地緩存,可能會遇到以下問題:
(1)如果用戶的密碼等隱私信息在后台並沒有進行加密處理,則會保存在本地緩存,有可能被其他擁有讀取緩存權限的應用獲取導致隱私泄露。
解決辦法:正規的開發流程中,后台返回到前端的用戶數據中,絕大部分信息都應該是通過MD5等加密算法加密過后的,如果沒有,應進行后台處理。
(2)通常需要登錄的應用,后台的token令牌是有有效期限的,期限過了之后所有需要用到token的接口請求都會失敗。保存在本地的緩存如果不重新執行登錄操作刷新緩存數據,則會有token失效的問題。
解決辦法:(1)在前端也編寫緩存清理期限,與后台保持一致,到達期限后提示用戶登錄失效,請重新登錄。
(2)后台提供用戶信息獲取接口,在應用的生命周期函數里調用接口刷新緩存。