Bagaimana untuk menangani isu -isu melarikan diri watak khas dalam parameter pertanyaan URL di Vue?

Proses Parameter Pertanyaan URL di Vue untuk melarikan diri watak khas

Dalam satu senario log masuk, parameter URL sering mengandungi maklumat seperti id dan key yang digunakan untuk pengesahan. Sebagai contoh, URL mungkin sama dengan http://localhost:8088/taxbureaulogin?id=1206&key=ze9 ticzsrej... Penyemak imbas boleh melarikan diri dari watak khas di dalamnya, sebagai contoh Tukar ke ruang, / juga boleh melarikan diri. Aplikasi VUE depan perlu memproses watak khas ini dengan betul untuk memastikan integriti data.

Biasanya, kami menggunakan URLSearchParams untuk mendapatkan parameter pertanyaan URL:

 Biarkan SearchParams = UrlSearchParams baru (window.location.search);

Walau bagaimanapun, parameter yang diperolehi dengan kaedah ini mungkin telah dilepaskan. Sebagai contoh, ze9 ticzsrejfujj/bxjcq== mungkin menjadi ze9 ticzsrejfujj/bxjcq== .

Penyelesaian:

1. Pemprosesan backend (disyorkan): Apabila backend menjana token, disarankan untuk menggunakan pengekodan base64url untuk mengelakkan Watak khas seperti, / dan = . Ini adalah penyelesaian yang ideal yang secara asasnya dapat menyelesaikan masalah ini.

2. Pemprosesan front-end (jika back-end tidak boleh diubahsuai): bahagian depan boleh menggunakan encodeURIComponent untuk menyandikan nilai token yang diperoleh dan kemudian lulus ke belakang. Harus diingat bahawa versi Vue Router yang berbeza berkelakuan berbeza:

   • Vue Router 3.x: Vue Router 3.x akan secara automatik menyahkod aksara khas. Maklumat URL yang diperoleh menggunakan location.href juga merupakan rentetan yang melarikan diri. Parameter yang diperolehi oleh URLSearchParams juga telah dimulakan. Oleh itu, adalah perlu menggunakan pengekodan encodeURIComponent sebelum lulus ke backend.

   • Vue Router 4.x: Vue Router 4.x mengoptimumkan pemprosesan parameter URL, dan pengekodan parameter dalam atribut $route lebih konsisten. Nilai -nilai dalam path dan fullPath tidak lagi dimulakan, hash akan dikodkan. Apabila menggunakan push , resolve dan replace kaedah, laluan mesti dikodkan.

   Kod berikut menunjukkan contoh menggunakan encodeURIComponent dalam Vue Router 3.x:

    Biarkan SearchParams = UrlSearchParams baru (window.location.search);
   biarkan kunci = searchParams.get ('kunci');
   Biarkan encodedKey = encodeuricomponent (kekunci); // lulus ke backend selepas pengekodan

3. Gunakan atribut $route (Vue Router 4.x): Dalam Vue Router 4.x, gunakan atribut $route terus untuk mendapatkan parameter tanpa pengekodan tambahan.

Ringkasnya, adalah disyorkan untuk mengutamakan kaedah pemprosesan backend untuk memastikan integriti dan keselamatan data. Jika backend tidak dapat diubah suai, pilih kaedah pemprosesan front-end yang sesuai berdasarkan versi Router Vue.

Atas ialah kandungan terperinci Bagaimana untuk menangani isu -isu melarikan diri watak khas dalam parameter pertanyaan URL di Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!