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

場景：vue-router實現的單頁應用，登陸頁調用登陸接口後，服務器返回用戶信息，而後經過router.push({name: 'index', params: res.data})跳轉到主頁，並在主頁顯示數據。可是當刷新頁面時，因爲並非經過登陸接口進入主頁，router中沒有‘params: res.data’信息，主頁沒法獲取到登陸信息。

解決方案：

一、session&服務器渲染

傳統的方案是，登陸頁和主頁是單獨的兩個頁面，登陸成功後服務器生成用戶信息對應的session，而後渲染主頁數據，並經過響應頭將sessionid傳給瀏覽器並生成相應的cookie文件。這樣下次請求頁面時，瀏覽器會在http header帶上相應的cookie，而後服務器根據cookie中的sessionid判斷用戶是否登陸，再顯示用戶數據。

若是項目採用先後端分離思想，服務器只提供接口，不進行服務器渲染，那麼這種辦法是行不通了。

二、$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

另外一個辦法是把登陸參數存入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 ''
}

四、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)