首頁  >  文章  >  web前端  >  vue-router路由參數刷新消失的問題解決方法詳解

vue-router路由參數刷新消失的問題解決方法詳解

怪我咯
怪我咯原創
2017-07-04 15:04:393317瀏覽

本篇文章主要介紹了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中,像這樣:“http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx”,然後在created鉤子中呼叫登入介面來傳回資料。

即使密碼進行了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(&#39;;&#39;)
  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路由參數刷新消失的問題解決方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn