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