用户进入app,判断本地是否有用户信息。
有,调用
api/refresh
,判断是否需要重新登录。不需要(连续登录),将信息保存在
vuex
中,并进入首页,往后数据读取全部走vuex
。需要(长时间未登录),删除本地用户信息并跳转到登录流程。
没有, 跳转到登录流程(以下是登录流程)。
调用
api/login
登录。将保存到本地,并保存到
vuex
中,往后数据读取全部走vuex
。
所有接口都判断用户的登录状态,所以我们是在根组件直接拦截http
请求,根据状态码判断是否用户需要从新登录,但是在用户信息的存储上是和我上面说的是一致的,本地存储做自动登录,vuex
做数据读取用的。
用户登录成功以后应该在本地保存一份用户数据,因为保存本地的方法有很多种,比如localstorage、
cookie
、indexedDB
等,所以应该封装一个用户数据的读取类,解除代码耦合,将来要改成其他存储方式比较简单。
const USER_INFO='USER_INFO'
function getUserinfo(){}
function setUserinfo(){}
我假设一个情景,在前期我们要求吧用户信息存储在localStorage
中,但是后期,我们又不想存在这里的,我们希望存在cookie
甚至其他服务器,那么照你的这种写法,需要替换项目中的所有localStorage
调用,所以这里提取出一层,即model
层,或者说是存储层,那么我们不需要切换修改所有项目中的localStorage
调用,只需要修改model
层中的localStorage
调用为cookie
或者网络连接。这样保持我们调用方式不变:getUserinfo
,同时还减小工作量,降低误差。在团队的分工合作中,负责这一层的团队成员直接从localStorage
切换成cookie
也不会对上层的团队成员造成影响。也就是随意我切换存储引擎不和任何人打招呼我自己也能完成,还不影响他们。而且独立出来以后我可以针对这一部分直接做单元测试,对项目的维护也有很大帮助。关键词:MVC
、面相接口编程
。
最简单的做法就是本地没数据就登录,有数据就刷新,后台判断数据过期了就清除数据再登录。
vuex
相当于一个全局变量,是以一个全局单例模式管理,不管在树的哪个位置,任何组件都能获取状态或者触发行为