router路由参数刷新消失难点的消除措施,router路由参数刷新消失的难点消除方式

vue-router路由参数刷新消失的难点解决办法,vue-router路由

景况:vue-router完毕的单页应用,登入页调用登入接口后,服务器再次回到客户消息,然后经过router.push({name:
‘index’, 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中,像这么:“

不畏密码实行了md5加密,将客商名密码那类敏感新闻放在url中料定也是不客观。

3、cookie

另二个措施是把登入参数存入cookie,然后在created钩子中得到cookie中存的音信,再调用登陆接口。将客户名密码存入cookie中一致不创设,立异版是登陆成功后服务器再次来到叁个token,在保藏期内经过token获取顾客数量。

cookie存取数据比较费心,因为cookie中键值对是字符串并以 “=”
链接,要求额外写操作cookie的艺术。

<script>
 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存款和储蓄到地面,为何不直接把常用的数目直接保存到本地呢?利用本土数据,可以减去顾客端网络央求,还能下跌服务器担负。

出于localStorage和sessionStorage是只读的,不能够一贯将其针对性三个对象。也不可能应用Object.assign()复制对象,因为值会变成字符串”[object
Object]”,全数只有经过巡回为 sessionStorage 加多属性了。

...
for (var key in res.data.customer) {
 sessionStorage[key] = res.data.customer[key]
} 
...

以上是自个儿在眼前做事中相遇的标题,最终动用的方案是使用sessionStorage存款和储蓄数据。

如上就是本文的全体内容,希望对我们的就学抱有帮忙,也盼望大家多多帮衬帮客之家。

场景:vue-router达成的单页应用,登陆页调用登陆接口后,服务器再次来到顾客消息,然…

vue router路由参数刷新消失难题的缓和情势,vuerouter

场景:vue-router实现的单页应用,登入页调用登陆接口后,服务器重回顾客新闻,然后通过router.push({name:
‘index’, 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中,像这么:“

不畏密码进行了md5加密,将客户名密码那类敏感消息放在url中千真万确也是不客观。

3、cookie

另一个艺术是把登陆参数存入cookie,然后在created钩子中赢得cookie中存的音讯,再调用登陆接口。将客商名密码存入cookie中平等不客观,创新版是登陆成功后服务器重临三个token,在保藏期内通过token获取客户数据。

cookie存取数据相比麻烦,因为cookie中键值对是字符串并以 “=”
链接,供给额外写操作cookie的法子。

<script>
 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存款和储蓄到地面,为何不直接把常用的数额直接保存到本地呢?利用本地数据,能够减去顾客端互联网需要,还是能减低服务器担负。

由于localStorage和sessionStorage是只读的,不能够一贯将其针对性三个对象。也不能够选拔Object.assign()复制对象,因为值会形成字符串”[object
Object]”,全体唯有通过巡回为 sessionStorage 增多属性了。

...
for (var key in res.data.customer) {
 sessionStorage[key] = res.data.customer[key]
} 
...

以上是本人在前不久做事中境遇的难题,最后接纳的方案是运用sessionStorage存款和储蓄数据,若是你有更加好的化解方案还望不吝赐教

如上便是本文的全体内容,希望对大家的读书抱有帮忙,也指望大家多多帮助帮客之家。

router路由参数刷新消失难点的化解办法,vuerouter 场景:
vue-router达成的单页应用,登入页调用登陆接口后,服务器再次回到客商信息,然后通…

场合:vue-router实现的单页应用,登陆页调用登陆接口后,服务器重临客户消息,然后经过router.push({name:
‘index’, 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中,像那样:“

纵使密码进行了md5加密,将客户名密码这类敏感消息放在url中必将也是不创设。

3、cookie

另一个方法是把登陆参数存入cookie,然后在created钩子中获得cookie中存的新闻,再调用登录接口。将顾客名密码存入cookie中同样不客观,创新版是登陆成功后服务器重返叁个token,在保藏期内通过token获取客户数量。

cookie存取数据相比较费心,因为cookie中键值对是字符串并以 “=”
链接,须要额外写操作cookie的不二秘技。

<script>
 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存款和储蓄到本地,为何不直接把常用的多少直接保存到本地呢?利用本地数据,能够削减客商端互联网央浼,还是可以缩小服务器肩负。

出于localStorage和sessionStorage是只读的,无法一贯将其针对性一个目的。也无法动用Object.assign()复制对象,因为值会变成字符串”[object
Object]”,全数唯有因而轮回为 sessionStorage 增加属性了。

...
for (var key in res.data.customer) {
 sessionStorage[key] = res.data.customer[key]
} 
...

上述是笔者在目前干活中遇到的主题素材,最终动用的方案是采用sessionStorage存款和储蓄数据。

如上正是本文的全体内容,希望对大家的上学抱有支持,也愿意大家多多帮衬脚本之家。

你或者感兴趣的小说:

  • vue
    router嵌套路由在history格局下刷新不能渲染页面难题的消除方法
  • 解决vue router使用 history
    格局刷新后404主题材料
  • vue-router3.0版本中 router.push
    无法刷新页面包车型客车主题素材