vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue项目登录成功后退出时清空sessionId和userId

vue项目登录成功后退出时清空sessionId和userId的问题

作者:hx_1199

这篇文章主要介绍了vue项目登录成功后退出时清空sessionId和userId的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

项目背景

首先介绍一下,项目中用了vuex;

从前端页面来讲,如果登录表单的内容验证都通过之后,当我们点击登录按钮的时候向后台发送请求,请求成功后,后台会给我们返回信息,其中信息会有sessionStr和sessionId等个人标识(我的理解是后台根据这个sessionStr和sessionId在control层或者其他层来写登录的人的个人信息)所以当我们点击退出的时候,一般会像后台再发送一个协议,协议中会包括sessionStr和sessionId。

以上是我对逻辑功能的大致理解,好了上代码吧;

首先项目中实现的效果是登录之前头部只展示登录和注册登录之后头部展示个人账号,资产,订单和退出等。

既然是在登录成功之后头部组件的样式发生变化,那么提交给mutation(vuex)的内容则应该在登录组件中写。

登录成功后将userId,sessionStr和tel提交到vuex这样我在头部的组件也可以用

将session信息存到locolStorage里面(写到这时,我想有些人会想,为什么要存到locolstorage中,理由是如果不存到locolstorage里,刷新页面的时候,vuex会清空数据,所以存到locolstorage里面)

好了下面就是页面上的应用了

在header组件中应引入

页面上的判断是

写到这里已经完成了头部组件的样式改变,接下来就是点击退出时我们应该做的:

点击退出,我们要给后台发送这个人的session信息;

并且我们要讲页面头部样式换回以前的登录和注册,所以此时提交setSessionInfo的信息为空

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文