vue-router組件狀態刷新消失的問題


場景: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)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM