项目退出功能实现以及部分接口优化

项目退出功能实现以及部分接口优化

一.退出功能实现：
1》添加退出按钮，并实现退出登录的接口：
navheader.vue：


2》此时退出功能没有完全实现，我们需要把在navheader渲染的用户名称和购物车数量清空：
清空cookie和vuex中 用户名称和购物车数量

3》正常情况下，用户选择一定量的商品添加购物车，退出登录再登录，购物车也不会清空，但是我们现在会清空，我们需要进行修改：我们需要再次登录后，重新获取购物车数量。

此时有人会有问题，之前App.vue不是设置过获取用户名称和购物车数量的函数调用吗？

我们在App.vue设置获取用户名称和购物车数量的函数调用的初心是因为我们是单页面的，我们把数据存储在vuex里面去，vuex在内存中存储，当我们页面刷新后，内存数据会消失，为了保持数据一致性，需要重新获取数量，重新存储到vuex中，这样才能起到桥梁的作用。

但是我们这个场景从退出到登录，再到登录，没有刷新页面，这个过程没有调用app.vue，app.vue只是在项目第一次进来才会调用一次，之后的跳转都不会再调用了

这回我们明白了之前app.vue的相关设置，无法解决这个问题，我们在navheader.vue中重新获取购物车数量：

二.接口优化问题：
1》sum接口优化：

①.但此时我们在首页页面进行刷新，在XHR上发现会调用两次sum接口，
一次是app.vue的，一次是navheader的，这样会造成资源上的浪费，此时我们应该进行判断如果是从登录页面过来的，在调用navheader的sum接口，如果单纯刷新首页，再调用app.vue的sum接口

②.我们如何判断是从登录页面过来的呢：
在login.vue中：

this.$router.push设置参数：
1）用params传参
name代表跳转路由的组件名称，在router.js中设置的

2）除此之外我们还可以用query进行传参
此时不能用name，必须用path：

③.在此次我们选择用params传参，然后在navheader中：

这样就优化了这个sum接口

2》app.vue中有关接口的优化

如果没有登录，刷新首页，也会获得用户信息和购物车数量，这是没有意义的

①.首先我们要判断是不是在登录状态，此时利用cookie

②.修改cookie的expires与 JSESSIONID（代表后端的，后端用java就是JSESSIONID）一致都为Session，即会话级别：

什么是Session会话级别的，就是浏览器关掉（彻彻底底的关掉，mac必须给浏览器退出），会话结束，这个userid的cookie就会丢失，我们要重新登录。