@H_403_0@场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: 'index',params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。
@H_403_0@
解决方案：
@H_4030@
1、session&服务器渲染
@H403_0@传统的方案是，登录页和主页是单独的两个页面，登录成功后服务器生成用户信息对应的session，然后渲染主页数据，并通过响应头将sessionid传给浏览器并生成相应的cookie文件。这样下次请求页面时，浏览器会在http header带上相应的cookie，然后服务器根据cookie中的sessionid判断用户是否登录，再显示用户数据。
如果项目采用前后端分离思想，服务器只提供接口，不进行服务器渲染，那么这种办法是行不通了。
@H_4030@
2、$route.query
@H403_0@我们可以在路由跳转的时候带上登录请求的参数：
3、cookie
@H_403_0@另一个办法是把登录参数存入cookie，然后在created钩子中获取cookie中存的信息，再调用登录接口。将用户名密码存入cookie中同样不合理，改进版是登录成功后服务器返回一个token，在有效期内通过token获取用户数据。 @H_403_0@cookie存取数据比较麻烦，因为cookie中键值对是字符串并以 "=" 链接，需要额外写操作cookie的方法。
function setCookie (name,value,exdays) {
let date = new Date()
date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000))
let expires = "expires=" + date.toGMTString()
document.cookie = name + "=" + value + "; " + expires
}
function getCookie (name) {
name = name + "="
let cookieArr = document.cookie.split(';')
for (let i = 0; i < cookieArr.length; i++) {
let cookie = cookieArr[i].trim()
if (cookie.indexOf(name) === 0) {
return cookie.slice(name.length)
}
}
return ""
}
@H_403_0@