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

vue中使用vuex结合sessionStorage做的登录功能相关推荐

在Vue中调用微信的扫描二维码功能
在Vue中调用微信的扫描二维码功能步骤新建vue文件(这里采用mint的标签库--就一个按钮~~) 关键代码 <template><div class="login_d ...
应该怎么做一个登录功能?
版权是我的,转载没有通过我的同意的爬虫都是傻逼. 假设有user表.里面有id,acount(账户,nvarchar(50)),pwd(密码,nvarchar(50)). 最简单的实现渣渣说做个登录 ...
vue中使用vuex(超详细)
vuex是使用vue中必不可少的一部分,基于父子.兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公 ...
vue实现网页端企业微信扫码登录功能（前端部分）
时至今日,企业微信在企业日常工作中的使用越来越频繁也越来越重要,不少企业已使用企业微信进行着日常的工作安排管理.在这种背景下,各类系统和企业微信对接的需求也不断增加,今天要说的就是一个比较常见的需求 ...
Vue开发实例（20）之实现登录功能
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
Vue中基于Vuex使用echarts组件动态数据绑定的方法
效果如下: 1.导入echarts组件,建议使用4.9.0版本,5.0.1可能会报错 npm uninstall echarts //卸载npm install echarts@4.9.0//引入特定 ...
四十二、开始Vuex的学习：如何在Vue中使用Vuex
@Author:Runsen @Date:2020/7/12 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
vue中显示和隐藏如何做动画_vue-State Transitions（状态转换）
Vue的过渡系统提供了许多简单的方法来动画进入,离开和列表,但动画数据本身又如何呢?例如: 数字和计算显示颜色 SVG节点的位置元素的大小和其他属性所有这些都已经存储为原始数字或可以转换为数字. ...
在vue中使用vuex,修改state的值示例
1. 安装 vuex npm install vuex -S 2.在目录下创建store文件 3. 在store.js编辑一个修改state的方法然后在mian.js中全局引入最后在组件中使用这 ...

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

先说一波vuex的好处

vue中使用vuex结合sessionStorage做的登录功能相关推荐

最新文章

热门文章