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 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
mailto的使用技巧分享
Dec 21 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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
PHPlet在Windows下的安装
2006/10/09 PHP
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
JS array 数组详解
2009/03/22 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
python实现划词翻译
2020/04/23 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
个人简历自我评价范文
2014/02/04 职场文书
高二物理教学反思
2014/02/08 职场文书
信息技术教学反思
2014/02/12 职场文书
学校后勤岗位职责
2014/02/19 职场文书
大学军训感言200字
2014/02/26 职场文书
个人考核材料
2014/05/15 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
vue实现登陆页面开发实践
2022/05/30 Vue.js
基于docker安装zabbix的详细教程
2022/06/05 Servers