解决vue router组件状态刷新消失的问题


Posted in Javascript onAugust 01, 2018

场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})跳转到主页,并在主页显示数据。但是当刷新页面时,由于并不是通过登录接口进入主页,router中没有‘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钩子中调用登录接口来返回数据。

即使密码进行了加密,将用户名密码这类敏感信息放在url中肯定也是不合理。

3、cookie

另一个办法是把登录参数存入cookie,然后在created钩子中获取cookie中存的信息,再调用登录接口。将用户名密码存入cookie中同样不合理,改进版是登录成功后服务器返回一个token,在有效期内通过token获取用户数据。

cookie存取数据比较麻烦,因为cookie是一个字符串,保存的键值对以 "=" 链接,需要额外写操作cookie的方法。

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存储到本地,为什么不直接把常用的数据直接保存到本地呢?利用本地数据,可以减少客户端网络请求,还可以降低服务器负担。

由于sessionStorage中保存的值是字符串,直接赋值非字符串类型会先调用其toString()方法。例如执行sessionStorage.user = user,保存的值却是[object Object]。我们可以通过JSON.stringify()将需要保存的对象转为JSON字符串再保存到sessionStorage,然后在需要使用时通过JSON.parse()将字符串转回对象。

let user = {
 name: 'admin',
 address: 'xxx',
 email: 'xx@xx.xx'
}
// sessionStorage.user = user // [object Object]
sessionStorage.user = JSON.stringify(user)
...
let data = JSON.parse(sessionStorage.user)

总结

以上所述是小编给大家介绍的解决vue router组件状态刷新消失的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
javascript实现获取字符串hash值
May 10 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
Promise.all中对于reject的处理方法
Aug 01 #Javascript
详解es6超好用的语法糖Decorator
Aug 01 #Javascript
Vue Router去掉url中默认的锚点#
Aug 01 #Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 #Javascript
node.js遍历目录的方法示例
Aug 01 #Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 #Javascript
Angular路由ui-router配置详解
Aug 01 #Javascript
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
php单链表实现代码分享
2016/07/04 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
js实现放大镜特效
2017/05/18 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
python中for语句简单遍历数据的方法
2015/05/07 Python
Python实现的爬虫功能代码
2017/06/24 Python
简单实现python收发邮件功能
2018/01/05 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
Python阶乘求和的代码详解
2020/02/14 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Python requests上传文件实现步骤
2020/09/15 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
关于工作经历的证明书
2014/10/11 职场文书
运动会表扬稿
2015/01/16 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python