.jpg)
vue 中處理 URL 查詢參數(shù)特殊字符轉(zhuǎn)義
在單點(diǎn)登錄場景中，URL 參數(shù)常包含用于身份驗(yàn)證的 id 和 key 等信息。 例如，URL 可能類似于 http://localhost:8088/taxbureaulogin?id=1206&key=ze9+ticzsrej…。 瀏覽器可能會對其中的特殊字符進(jìn)行轉(zhuǎn)義，例如 + 變?yōu)榭崭瘢? 也可能被轉(zhuǎn)義。 前端 Vue 應(yīng)用需要正確處理這些特殊字符，以保證數(shù)據(jù)完整性。
通常，我們使用 URLSearchParams 獲取 URL 查詢參數(shù)：
let searchParams = new URLSearchParams(window.location.search);
然而，此方法獲取的參數(shù)可能已進(jìn)行瀏覽器轉(zhuǎn)義。 例如，ze9+ticzsrejfujj/bxjcq== 可能變成 ze9 ticzsrejfujj/bxjcq==。
解決方法：
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
-
后端處理 (推薦)： 后端在生成 Token 時，建議使用 base64url 編碼，避免 +、/ 和 = 等特殊字符。這是最理想的解決方案，能從根本上解決問題。
-
前端處理 (如果后端無法修改)： 前端可以使用 encodeURIComponent 對獲取到的 token 值進(jìn)行編碼，然后再傳遞給后端。 需要注意的是，Vue router 不同版本的行為有所不同：
-
Vue Router 3.x: Vue Router 3.x 會自動解碼特殊字符。 使用 location.href 獲取的 URL 信息也是已轉(zhuǎn)義的字符串。 URLSearchParams 獲取到的參數(shù)也已經(jīng)解碼。 因此，需要在傳遞給后端之前使用 encodeURIComponent 編碼。
-
Vue Router 4.x: Vue Router 4.x 對 URL 參數(shù)的處理進(jìn)行了優(yōu)化，$route 屬性中的參數(shù)編碼更一致。 path 和 fullPath 中的值不再被解碼，hash 會被解碼。 在使用 push、resolve 和 replace 方法時，必須對路徑進(jìn)行編碼。
以下代碼演示了在 Vue Router 3.x 中使用 encodeURIComponent 的示例：
let searchParams = new URLSearchParams(window.location.search); let key = searchParams.get('key'); let encodedKey = encodeURIComponent(key); // 編碼后傳遞給后端 -
-
利用 $route 屬性 (Vue Router 4.x): 在 Vue Router 4.x 中，直接使用 $route 屬性獲取參數(shù)，無需額外編碼。
總而言之，建議優(yōu)先選擇后端處理方法，以確保數(shù)據(jù)的完整性和安全性。 如果后端無法修改，則根據(jù) Vue Router 版本選擇合適的前端處理方法。
.png)
