解决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 相关文章推荐
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
js面向对象方式实现拖拽效果
Mar 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
mysql5写入和读出乱码解决
2006/11/25 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
Vue实现选择城市功能
2017/05/27 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
python标准算法实现数组全排列的方法
2015/03/17 Python
Python简单基础小程序的实例代码
2019/04/28 Python
深入解析神经网络从原理到实现
2019/07/26 Python
django框架中间件原理与用法详解
2019/12/10 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
工商管理专业学生的自我评价
2013/10/01 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
python中print格式化输出的问题
2021/04/16 Python
Golang 编译成DLL文件的操作
2021/05/06 Golang