解决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 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
jquery map方法使用示例
Apr 23 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
vue 中filter的多种用法
Apr 26 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
js+css实现全屏侧边栏
Jun 16 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 iis5下安装php4.0+mysql之我见
2006/10/09 PHP
php单件模式结合命令链模式使用说明
2008/09/07 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
Php图像处理类代码分享
2012/01/19 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
javascript new fun的执行过程
2010/08/05 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
python获得一个月有多少天的方法
2015/06/04 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
测绘工程系学生的自我评价
2013/11/30 职场文书
财务总经理岗位职责
2014/02/16 职场文书
书法大赛策划方案
2014/06/04 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
2015年工商所工作总结
2015/05/21 职场文书
初一军训感言
2015/08/01 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers