vue中使用vuex结合sessionStorage做的登录功能

先说一波vuex的好处

vuex可以保存数组、对象、或者嵌套结构，不用toString
双向绑定，使用commit修改一处状态后，所有引用的地方自动更新，不需要重新取值
可以自定义数据过滤方法、取值方法、逻辑判断等
可以在vuex里封装ajax，外部只负责调用数据

最近做项目需要保存用户登录状态，要做到刷新页面用户状态不变，以及实现登出功能。实际上是很简单的，但是对于vue新手来说，我找了好几个网址都讲的不是很清楚，磕磕绊绊理清了关系，在这里总结一下。

首先，vuex安装完成之后，构建如下目录：

vuex目录结构

这样做的目的是降低代码的耦合度，方便以后的修改与维护。

然后，vuex中几个文件详情如下：

store.js

在store.js中目前保存三个数据，一个是当前用户，一个是判断当前用户是否已经登录，最后一个是保存用户登录后持有的token。实际上token也可以不保存在vuex中，因为vuex是一个状态管理器而非一个存储工具。我在axios的headers里是直接用的sessionStorage里的token。

getters.js

mutations.js

actions.js

接下来，在用户登录的时候，我们就需要将用户名和token存放入sessionStorge，再由sessionStorage传入vuex中。

如上图，在登录成功之后，执行红框中的两个操作，就实现了上述的功能。vuex的dispatch和commit方法是有区别的，这个区别下一篇我们再详细讲。sessionStorage的setItem和getItem是一对，语义上就可以理解用法，不多说。将用户名放入vuex，调用setUser即执行actions.js中的方法来改变状态，则进入mutations.js中的userStatus方法，最终实现改变store.js中的三个状态。

那么其实到这里，已经实现了将用户的状态，即用户名和token放入sessionStorage中的要求了。

下一个问题是，在刷新页面的时候，如何获取这个状态呢？

未登录状态

已登录状态

首先要知道，vuex中的状态一旦页面刷新，就不再存在。所以为了实现在刷新页面时，仍然展现出用户头像，就需要从sessionStorage种提取状态再传值给vuex。

html代码

computed里的isLogin()

每当刷新页面的时候，就会从sessionStorage中查询是否有userName和token的存在，如果存在，则改变vuex中的isLogin，即用户状态，最后return一个isLogin()。这样就实现了保存用户登录信息的功能。

最后，再来说说登出功能。要明白一个逻辑，用户登录之后，如果再次回到登录界面，必然是执行了登出操作。所以直接在login.vue里加一个路由控制就可以了。

login的组建内守卫

登出也就是将sessionStorage里的userName和token清空，就不多说了。

这篇博客还有比较多不足的地方，欢迎大家指正。

2018/12/11 补充：

之前一段时间面临大四找工作， 偶尔登录简书看一下。 留言看到很多初学者还是不明白代码怎么写， 在这里贴出我gitee这个项目地址。首先这是我第一个vue项目， 有很多不成熟的地方， 而且后台接口现在已经关闭，所以我屏蔽了ip地址和端口号， 现在给出地址， 不会的旁友们可以自己去看。

https://gitee.com/beautzy/mooc