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 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
jQuery插件制作的实例教程
May 16 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php删除数组元素示例分享
2014/02/17 PHP
php验证手机号码
2015/11/11 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
php语法检查的方法总结
2019/01/21 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python实现截屏的函数
2015/07/25 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
服务理念标语
2014/06/18 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL