解决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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
jquery remove方法应用详解
Nov 22 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
深入解析Python中的上下文管理器
2016/06/28 Python
Python制作简易注册登录系统
2016/12/15 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Python交互式图形编程的实现
2019/07/25 Python
Python实现扫码工具的示例代码
2020/10/09 Python
python实现图片转字符画
2021/02/19 Python
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
工厂厂长岗位职责
2013/11/08 职场文书
母亲节感恩寄语
2014/02/21 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
单位综合评价意见
2015/06/05 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS