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 相关文章推荐
JavaScript模板入门介绍
Sep 26 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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和.net中des加解密的实现方法
2013/02/27 PHP
学习php中的正则表达式
2014/08/17 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
新电JAVA笔试题目
2014/08/31 面试题
几个Linux面试题笔试题
2012/12/01 面试题
教师学习培训邀请函
2014/02/04 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
大学体育课感想
2015/08/10 职场文书
Hive导入csv文件示例
2022/06/25 数据库