登录的一些逻辑，使用localStorage

• 用户进入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相当于一个全局变量，是以一个全局单例模式管理，不管在树的哪个位置，任何组件都能获取状态或者触发行为