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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
ES6的新特性概览
Mar 10 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
JavaScript实现前端网页版倒计时
Mar 24 Javascript
什么是SOLID
Mar 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 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
js获取Get值的方法
2016/09/29 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python正则表达式知识汇总
2017/09/22 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
创先争优承诺书范文
2014/03/31 职场文书
代理协议书范本
2014/04/22 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
领导欢送会主持词
2015/07/06 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
Python 正则模块详情
2021/11/02 Python
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技