vue-router路由参数刷新消失的问题解决方法


Posted in Javascript onJune 17, 2017

场景: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存储数据。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
JavaScript实现星级评价效果
May 17 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
js通过canvas生成图片缩略图
Oct 02 Javascript
JS实现商品筛选功能
Aug 19 #Javascript
node文件上传功能简易实现代码
Jun 16 #Javascript
详解webpack 多入口配置
Jun 16 #Javascript
requirejs + vue 项目搭建详解
Jun 16 #Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 #Javascript
You might like
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
高二生物教学反思
2014/01/27 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
股票投资建议书
2014/05/19 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
停电通知范文
2015/04/16 职场文书
爱心捐书倡议书
2015/04/27 职场文书
人民币使用说明书
2019/04/17 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle