Uni-app登錄態管理(vuex)


應用中,保持登錄狀態是常見需求,本文講解使用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)后台提供用戶信息獲取接口,在應用的生命周期函數里調用接口刷新緩存。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM