解决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异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
fastadmin中调用js的方法
May 14 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
JavaScript实现轮播图片完整代码
Mar 07 Javascript
详解JavaScript 异步编程
Jul 13 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
php对二维数组进行排序的简单实例
2013/12/19 PHP
php反射应用示例
2014/02/25 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python中的高级数据结构详解
2015/03/27 Python
Python实现图片转字符画的示例
2017/08/22 Python
Python切片操作实例分析
2018/03/16 Python
python基础教程项目二之画幅好画
2018/04/02 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Django框架模板的使用方法示例
2019/05/25 Python
python numpy中cumsum的用法详解
2019/10/17 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
New delete 与malloc free 的联系与区别
2013/02/04 面试题
医院后勤自我鉴定
2013/10/13 职场文书
护士辞职信范文
2014/01/19 职场文书
上课迟到检讨书
2014/02/19 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
办公室主任个人总结
2015/02/28 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
Python基础之Socket通信原理
2021/04/22 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript