vue router路由參數重新整理消失問題的解決方案，vuerouter

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中，像這樣：“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(';') 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儲存資料，如果您有更好的解決方案還望不吝賜教

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。