博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue-router组件状态刷新消失的问题
阅读量:4563 次
发布时间:2019-06-08

本文共 2246 字,大约阅读时间需要 7 分钟。

场景: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中肯定也是不合理。

另一个办法是把登录参数存入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)

转载于:https://www.cnblogs.com/huanglei-/p/7026808.html

你可能感兴趣的文章
Paint Chain HDU - 3980(sg)
查看>>
Chales常用操作
查看>>
C++ 运算符重载<<
查看>>
windows镜像
查看>>
Flask 模板语法
查看>>
ZOJ FatMouse' Trade 贪心
查看>>
音乐播放器
查看>>
SQL COOKBOOK (Ch.1-10)
查看>>
创建数组
查看>>
dict使用
查看>>
[转] 移动平台Html5的viewport使用经验
查看>>
ASP.NET MVC的帮助类HtmlHelper和UrlHelper
查看>>
《Python数据科学手册》第五章机器学习的笔记
查看>>
ubuntu16.04 配置爬虫环境
查看>>
Centos7,PHP7安装swoole
查看>>
02_ListActive中响应事件 并LogCat输出
查看>>
doubleclick adx note
查看>>
Celery框架
查看>>
[c#]asp.net开发微信公众平台(4)关注事件、用户记录、回复文本消息
查看>>
[转载,感觉写的非常详细]DUBBO配置方式详解
查看>>