在vue中使用session Storage和vuex保存用户登录状态

    做项目时有时需要保存用户的登陆状态,要做到刷新页面用户状态不变,以及实现登出功能,这里介绍sessionStorage和vuex两种可以实现的方式,那么这两种方式有什么优缺点呢,分别在什么情况下使用呢?首先sessionStorage是基于会话的，不能跨页调用数据,一个页面修改了，另一个页面监听不到修改的数据. 而vuex需要一些依赖,小型项目就显得有点大材小用,所以在小型应用中直接访问sessionStorage就能实现保存登录状态的功能,而且这种方式比vuex要简单很多,但是在大型项目中,需要在多组件之间共享登陆状态,在页面不刷新的情况下下,取vuex中的值就可以判断了.

1.使用session Storage保存用户登录状态

图1 图一所示,sessionStorage.setItem即为保存数据方式,第一个参数为变量名,第二个参数为所储存的数据,在登陆页面中,登陆成功后返回用户登陆信息.

图二 如图二,在其他页面中查看用户登陆登陆状态,在钩子函数mounted中,通过sessionStorage.getItem方式应用数据到次页面中.

图三 图三所示,在main.js中判断登陆的各个状态下,sessionStorage里数据的储存情况,此处偏向业务逻辑了,各位看官请根据项目需求酌情编码.

2.使用session Storage+vuex保存用户登录状态

想要使用vuex第一步当然是安装vuex了, vuex中文官网已经介绍的非常详细了,https://vuex.vuejs.org/zh/installation.html,只要按照步骤安装即可.

vuex目录结构 vuex安装成功后,构建vuex目录,这样做的目的是降低代码的耦合度，方便以后的修改与维护。

store.js

getters.js

mutations.js

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

登陆页 如上图，在登录成功之后，就实现了上述的功能。vuex的dispatch和commit方法是有区别的。将用户名放入vuex，调用setUser即执行actions.js中的方法来改变状态，则进入mutations.js中的userStatus方法，最终实现改变store.js中的三个状态。那么其实到这里，已经实现了将用户的状态，即用户名和token放入sessionStorage中的要求了。

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

computed里的逻辑判断 用户登录之后，如果再次回到登录界面，必然是执行了登出操作。所以还是在main.js加一个路由控制就可以了。

login的组件内守卫 因为介绍了两种保存用户登录状态的技术,所以为了呈现效果在代码上进行了改动,有些地方的变量名称出现了一些错误,希望各位看官见谅!