场景: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 ""
- }
提到 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 存储数据,如果您有更好的解决方案还望不吝赐教
来源: http://www.jb51.net/article/116471.htm