在Vue應(yīng)用中如何處理URL查詢參數(shù)傳遞時(shí)的特殊字符轉(zhuǎn)義問題?

在Vue應(yīng)用中如何處理URL查詢參數(shù)傳遞時(shí)的特殊字符轉(zhuǎn)義問題?

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ù)一致。 這比依賴前端處理更可靠和高效。

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊9 分享