项目背景:与异地小组合作开发一款基于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值拿到就可以了。