vue應(yīng)用中URL查詢參數(shù)傳遞時(shí),特殊字符(如+、/、=)的轉(zhuǎn)義問題常常困擾開發(fā)者,尤其在單點(diǎn)登錄場(chǎng)景中。瀏覽器會(huì)自動(dòng)對(duì)URL中的某些字符進(jìn)行編碼,導(dǎo)致前端接收到的參數(shù)與原始參數(shù)不符。
問題:
單點(diǎn)登錄流程中,用戶通過包含id和key參數(shù)的URL跳轉(zhuǎn)到白名單頁面。例如,URL為:
http://localhost:8088/taxbureaulogin?id=1206&key=ze9+ticzsrej...
瀏覽器可能將其編碼為:
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記(深入)”;
http://localhost:8088/taxbureaulogin?id=1206&key=ze9%2Bticzsre...
Vue前端代碼使用URLSearchParams獲取key值:
let searchparams = new URLSearchParams(window.location.search);
但獲取到的key值與預(yù)期不符:
原始字符:ze9+ticzsrejfujj/bxjcq== 獲取后:ze9 ticzsrejfujj/bxjcq== // '+' 變成了空格
解決方案:
最佳方案是在后端生成Token時(shí)進(jìn)行Base64URL編碼,避免+、/、=等特殊字符。如果后端無法修改,前端可以使用encodeURIComponent處理獲取到的token值。
Vue-router版本的影響:
-
Vue-Router 3.x: 自動(dòng)解碼特殊字符。使用location API獲取URL信息時(shí),數(shù)據(jù)已經(jīng)是解碼后的結(jié)果。建議在后端處理特殊字符,而非依賴前端處理。
-
Vue-Router 4.x: 不會(huì)自動(dòng)解碼特殊字符,保持URL參數(shù)的一致性。
測(cè)試代碼:
var testUrl = 'http://localhost:8088/taxBureauLogin?test=123+A'; location.href = testUrl; // 瀏覽器跳轉(zhuǎn)后獲取query信息 new URLSearchParams(window.location);
測(cè)試結(jié)果表明瀏覽器會(huì)自動(dòng)對(duì)特殊字符進(jìn)行編碼。
總結(jié):
為了避免URL參數(shù)傳遞中的特殊字符轉(zhuǎn)義問題,建議在后端生成token時(shí)進(jìn)行Base64URL編碼或其他合適的編碼處理,確保前端接收到的參數(shù)與原始參數(shù)一致。 這比依賴前端處理更可靠和高效。