解决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 相关文章推荐
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
移动端界面的适配
Jan 11 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
Seajs源码详解分析
Apr 02 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
js+canvas实现画板功能
Sep 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
咖啡常见的种类
2021/03/03 新手入门
PHP中list()函数用法实例简析
2016/01/08 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
JavaScript 基础问答三
2008/12/03 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
javascript的内存管理详解
2013/08/07 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
js实现带搜索功能的下拉框
2020/01/11 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python中的二维列表实例详解
2018/06/19 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
怎样声明接口
2014/09/19 面试题
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
二年级体育教学反思
2014/01/15 职场文书
材料会计岗位职责
2014/03/06 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS