场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: 'index', params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。
解决方案：
1、session&服务器渲染
传统的方案是，登录页和主页是单独的两个页面，登录成功后服务器生成用户信息对应的session，然后渲染主页数据，并通过响应头将sessionid传给浏览器并生成相应的cookie文件。这样下次请求页面时，浏览器会在http header带上相应的cookie，然后服务器根据cookie中的sessionid判断用户是否登录，再显示用户数据。
如果项目采用前后端分离思想，服务器只提供接口，不进行服务器渲染，那么这种办法是行不通了。
2、$route.query
我们可以在路由跳转的时候带上登录请求的参数：
我要评论
router.push({name:'index', query:{username: 'xxx', password: 'xxxxxx'}})
...
this.$ajax({
url: 'xxx',
method: 'post',
data: {
username: this.$route.query.username,
password: this.$route.query.password
}
})
这样登录参数会被保存在url中，像这样：“http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx”，然后在created钩子中调用登录接口来返回数据。
即使密码进行了md5加密，将用户名密码这类敏感信息放在url中肯定也是不合理。
3、cookie
另一个办法是把登录参数存入cookie，然后在created钩子中获取cookie中存的信息，再调用登录接口。将用户名密码存入cookie中同样不合理，改进版是登录成功后服务器返回一个token，在有效期内通过token获取用户数据。
cookie存取数据比较麻烦，因为cookie中键值对是字符串并以 "=" 链接，需要额外写操作cookie的方法。
<script>
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 ""
}
4、html5 web存储
提到web存储，潜意识肯定觉得很多浏览器都不支持，其实ie8及以上都支持localstorage和sessionstorage了。vue项目最低支持ie9，所以可以放心的使用web存储。
localstorage存储数据没有时间限制，不主动删除就不会失效。而sessionstorage是在页面或者浏览器关闭时就会失效，适合本场景应用。
我们可以把token信息存在sessionstorage中，然后每次刷新页面通过token请求数据；但是既然能够把token存储到本地，为什么不直接把常用的数据直接保存到本地呢？利用本地数据，可以减少客户端网络请求，还可以降低服务器负担。
由于localstorage和sessionstorage是只读的，不能直接将其指向一个对象。也不能利用object.assign()复制对象，因为值会变成字符串"[object object]"，所有只有通过循环为 sessionstorage 添加属性了。
...
for (var key in res.data.customer) {
sessionstorage[key] = res.data.customer[key]
}
...
以上是我在最近工作中遇到的问题，最后采用的方案是使用sessionstorage存储数据。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
vue组件传值,父子传值,子父传值,兄弟传值,组件主动获取数据及方法
vuex 多模块时 模块内部的mutation和action的调用方式
网友评论