vue项目登录成功后退出时清空sessionId和userId的个人理解

项目背景:首先介绍一下,项目中用了vuex;
从前端页面来讲,如果登录表单的内容验证都通过之后,当我们点击登录按钮的时候向后台发送请求,请求成功后,后台会给我们返回信息,其中信息会有sessionStr和sessionId等个人标识(我的理解是后台根据这个sessionStr和sessionId在control层或者其他层来写登录的人的个人信息)所以当我们点击退出的时候,一般会像后台再发送一个协议,协议中会包括sessionStr和sessionId。以上是我对逻辑功能的大致理解,好了上代码吧;
首先项目中实现的效果是登录之前头部只展示登录和注册登录之后头部展示个人账号,资产,订单和退出等。既然是在登录成功之后头部组件的样式发生变化,那么提交给mutation(vuex)的内容则应该在登录组件中写。vue项目登录成功后退出时清空sessionId和userId的个人理解
文章图片

登录成功后将userId,sessionStr和tel提交到vuex这样我在头部的组件也可以用
vue项目登录成功后退出时清空sessionId和userId的个人理解
文章图片


vue项目登录成功后退出时清空sessionId和userId的个人理解
文章图片

将session信息存到locolStorage里面(写到这时,我想有些人会想,为什么要存到locolstorage中,理由是如果不存到locolstorage里,刷新页面的时候,vuex会清空数据,所以存到locolstorage里面)
vue项目登录成功后退出时清空sessionId和userId的个人理解
文章图片



好了下面就是页面上的应用了:
在header组件中应引入
vue项目登录成功后退出时清空sessionId和userId的个人理解
文章图片

页面上的判断是
vue项目登录成功后退出时清空sessionId和userId的个人理解
文章图片

写到这里已经完成了头部组件的样式改变,接下来就是点击退出时我们应该做的:
vue项目登录成功后退出时清空sessionId和userId的个人理解
文章图片


点击退出,我们要给后台发送这个人的session信息;并且我们要讲页面头部样式换回以前的登录和注册,所以此时提交setSessionInfo的信息为空
【vue项目登录成功后退出时清空sessionId和userId的个人理解】个人理解,如有跑偏希望大佬们多多指点

    推荐阅读