項目背景:與異地小組合作開發一款基於uni-app框架的app。其中異地小組負責后端,提供接口供本地小組調用。
工具:hbuilder、charles、google瀏覽器、nox夜神模擬器
問題描述:將應用在瀏覽器中運行,不同用戶可以正常登陸,不存在緩存問題。但是打成安裝包之后,放到真機或者夜神模擬器中,使用不同用戶登陸應用,發現當前用戶在個人信息展示頁面看到的是前一個用戶的信息。
問題排查:因為在本地開發環境中無法重現問題,剛開始的想法是,檢查涉及到的代碼塊,是否有邏輯上的問題。以個人中心為例。
根據是否登陸標志isLogin來判斷是否跳轉到登錄頁。在登錄頁登陸之后,會使用vuex進行狀態管理,緩存isLogin、token、userInfoObj等信息;並使用uni.setStorage方法進行本地緩存,主要是token。
然后在發起請求的方法中通過uni.getStorage來獲取token,作為憑證發起后台請求。因為剛開始對於vuex的狀態管理和uni-app本地緩存機制的不了解,單純從代碼塊邏輯上並沒有看到問題,因為采取了發起請求之前就把所有的緩存清空(uni.clearStorage),以保證每次獲得都是最新的數據。然后打成包,繼續測試。這時候就發現,在模擬器中安裝后的第一次請求時,在個人中心頁面無法拿到個人信息,需要切換頁面之后,才可以看到數據,而換一個登陸用戶之后,在個人中心頁面還是看到前一個用戶的信息。這就很令人頭大了,因為本地開發環境沒辦法重新,而在模擬器中會出現問題。
所以沒辦法,只能使用抓包工具,來看下情況是什么樣的?這涉及到模擬器或者真機設置網絡代理的問題,在百度之后還是挺簡單的。但是在實踐過程中,發現https的請求無法拿到明文請求,即便添加了信任證書還是不行,所以只能切換到http請求地址來定位問題。
在模擬器中發起請求后,發現在登陸的login方法請求成功並返回token之后,再次發起獲取用戶信息的getUserInfo方法時,通過uni.getStorage並沒有及時的拿到值。
這個就很奇怪了,為什么會拿不到值吶?難道說是異步同步的問題嗎?於是,我在緩存部分的方法使用了同步緩存。
結果發現還是不行,於是就再次修改了,獲取緩存的地方。uni.getStorage修改為
打包后再測試,就發現可以了。
當然還有一種方式就是通過vuex獲取token值。這種方式沒有同步、異步之分,只要將token值放入到state中,然后在發起請求的方法處在將token值拿到就可以了。