快捷導(dǎo)航

解決vue router組件狀態(tài)刷新消失的問題

更新時(shí)間：2018年08月01日 16:55:13 作者：huanglei-

這篇文章主要介紹了vue router組件狀態(tài)刷新消失的問題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

場景：vue-router實(shí)現(xiàn)的單頁應(yīng)用，登錄頁調(diào)用登錄接口后，服務(wù)器返回用戶信息，然后通過router.push({name: 'index', params: res.data})跳轉(zhuǎn)到主頁，并在主頁顯示數(shù)據(jù)。但是當(dāng)刷新頁面時(shí)，由于并不是通過登錄接口進(jìn)入主頁，router中沒有‘params: res.data'信息，主頁無法獲取到登錄信息。

解決方案：

1、session&服務(wù)器渲染

傳統(tǒng)的方案是，登錄頁和主頁是單獨(dú)的兩個(gè)頁面，登錄成功后服務(wù)器生成用戶信息對(duì)應(yīng)的session，然后渲染主頁數(shù)據(jù)，并通過響應(yīng)頭將sessionid傳給瀏覽器并生成相應(yīng)的cookie文件。這樣下次請(qǐng)求頁面時(shí)，瀏覽器會(huì)在http header帶上相應(yīng)的cookie，然后服務(wù)器根據(jù)cookie中的sessionid判斷用戶是否登錄，再顯示用戶數(shù)據(jù)。

如果項(xiàng)目采用前后端分離思想，服務(wù)器只提供接口，不進(jìn)行服務(wù)器渲染，那么這種辦法是行不通了。

2、$route.query

我們可以在路由跳轉(zhuǎn)的時(shí)候帶上登錄請(qǐng)求的參數(shù)：

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
 }
})

這樣登錄參數(shù)會(huì)被保存在url中，像這樣：“ http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx ”，然后在created鉤子中調(diào)用登錄接口來返回?cái)?shù)據(jù)。

即使密碼進(jìn)行了加密，將用戶名密碼這類敏感信息放在url中肯定也是不合理。

3、cookie

另一個(gè)辦法是把登錄參數(shù)存入cookie，然后在created鉤子中獲取cookie中存的信息，再調(diào)用登錄接口。將用戶名密碼存入cookie中同樣不合理，改進(jìn)版是登錄成功后服務(wù)器返回一個(gè)token，在有效期內(nèi)通過token獲取用戶數(shù)據(jù)。

cookie存取數(shù)據(jù)比較麻煩，因?yàn)閏ookie是一個(gè)字符串，保存的鍵值對(duì)以 "=" 鏈接，需要額外寫操作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存儲(chǔ)

提到Web存儲(chǔ)，潛意識(shí)肯定覺得很多瀏覽器都不支持，其實(shí)IE8及以上都支持localStorage和sessionStorage了。Vue項(xiàng)目最低支持IE9，所以可以放心的使用Web存儲(chǔ)。

localStorage存儲(chǔ)數(shù)據(jù)沒有時(shí)間限制，不主動(dòng)刪除就不會(huì)失效。而sessionStorage是在頁面或者瀏覽器關(guān)閉時(shí)就會(huì)失效，適合本場景應(yīng)用。

我們可以把token信息存在sessionStorage中，然后每次刷新頁面通過token請(qǐng)求數(shù)據(jù)；但是既然能夠把token存儲(chǔ)到本地，為什么不直接把常用的數(shù)據(jù)直接保存到本地呢？利用本地?cái)?shù)據(jù)，可以減少客戶端網(wǎng)絡(luò)請(qǐng)求，還可以降低服務(wù)器負(fù)擔(dān)。

由于sessionStorage中保存的值是字符串，直接賦值非字符串類型會(huì)先調(diào)用其toString()方法。例如執(zhí)行sessionStorage.user = user，保存的值卻是[object Object]。我們可以通過JSON.stringify()將需要保存的對(duì)象轉(zhuǎn)為JSON字符串再保存到sessionStorage，然后在需要使用時(shí)通過JSON.parse()將字符串轉(zhuǎn)回對(duì)象。

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)

總結(jié)

以上所述是小編給大家介紹的解決vue router組件狀態(tài)刷新消失的問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: