單點登陸針對 vue 單頁面模式下的 hash 問題

因爲 hash 模式下，#/ 後面的參數沒法傳遞到後臺。

hash、hashchange事件

一、hash即URL中"#"字符後面的部分。

　　①使用瀏覽器訪問網頁時，若是網頁URL中帶有hash，頁面就會定位到id（或name）與hash值同樣的元素的位置；

　　②hash還有另外一個特色，它的改變不會致使頁面從新加載；

　　③hash值瀏覽器是不會隨請求發送到服務器端的；

　　④經過window.location.hash屬性獲取和設置hash值。

　　window.location.hash值的變化會直接反應到瀏覽器地址欄（#後面的部分會發生變化），同時，瀏覽器地址欄hash值的變化也會觸發window.location.hash值的變化，從而觸發onhashchange事件。

 

二、hashchange事件（IE8已支持該事件）

　　①當URL的片斷標識符更改時，將觸發hashchange事件（跟在#符號後面的URL部分，包括#符號）

　　②hashchange事件觸發時，事件對象會有hash改變前的URL（oldURL）和hash改變後的URL（newURL）兩個屬性：

window.addEventListener('hashchange',function(e) { console.log(e.oldURL);  console.log(e.newURL) },false);

 

解決方案

能夠經過頁面加載事件的 onload 事件

window.location.href 獲取 訪問地址

window.location.hash 獲取 hash 

而後在onload 中發送請求（請求頭攜帶 ticket 參數）到後臺效驗 是否已登陸 ，考慮到當前頁面加載完後，hash 能夠會發生變化，能夠在 onload 中同時註冊 hashchange 事件來監聽 hash 的變化，若是發生變化也就是訪問新的頁面，一樣須要發生請求到後臺檢驗是否已登陸或者ticket 是否過時。