Wie geht es mit Special Character Escape -Themen in URL -Abfrageparametern in Vue um?

Prozess -URL -Abfrageparameter in VUE für Special Character Escape

In einem einzelnen Sign-On-Szenario enthält der URL-Parameter häufig Informationen wie id und key zur Authentifizierung. Zum Beispiel könnte die URL ähnlich sein wie http://localhost:8088/taxbureaulogin?id=1206&key=ze9 ticzsrej... Der Browser kann zum Beispiel den Sonderzeichen entkommen Wechseln Sie in einen Raum, kann / entkommen. Front-End-VUE-Anwendungen müssen diese Sonderzeichen korrekt verarbeiten, um die Datenintegrität zu gewährleisten.

Normalerweise verwenden wir URLSearchParams , um URL -Abfrageparameter zu erhalten:

 suchparams = new urlSearchParams (window.location.search);

Die nach dieser Methode erhaltenen Parameter können jedoch ein Browser entkommen sein. Zum Beispiel kann ze9 ticzsrejfujj/bxjcq== ze9 ticzsrejfujj/bxjcq== werden.

Lösung:

1. Backend -Verarbeitung (empfohlen): Wenn das Backend Token generiert, wird empfohlen, die base64url -Codierung zu verwenden, um zu vermeiden Sonderzeichen wie, / und = . Dies ist die ideale Lösung, die das Problem grundlegend lösen kann.

2. Front-End-Verarbeitung (wenn das Back-End nicht geändert werden kann): Das Front-End kann encodeURIComponent verwenden, um den erhaltenen Token-Wert zu codieren und ihn dann an das Back-End zu übergeben. Es ist zu beachten, dass sich verschiedene Versionen von Vue Router anders verhalten:

   • Vue Router 3.x: Vue Router 3.x dekodieren automatisch Sonderzeichen. Die URL -Informationen, die mit location.href erhalten wurden. Erf ist ebenfalls eine entkommene Zeichenfolge. Die von URLSearchParams erhaltenen Parameter wurden ebenfalls dekodiert. Daher ist es notwendig, encodeURIComponent -Encodieren zu verwenden, bevor Sie zum Backend übergeben.

   • Vue Router 4.x: Vue Router 4.x optimiert die Verarbeitung von URL -Parametern, und die Parametercodierung im $route -Attribut ist konsistenter. Die Werte in path und fullPath sind nicht mehr dekodiert hash wird dekodiert. Bei Verwendung von push , resolve und replace von Methoden muss der Pfad codiert werden.

   Der folgende Code zeigt ein Beispiel für die Verwendung von encodeURIComponent in Vue Router 3.x:

    suchparams = new urlSearchParams (window.location.search);
   Sei Key = SearchParams.get ('Schlüssel');
   let codedKey = encodeuricomponent (Schlüssel); // nach der Codierung zum Backend gehen

3. Verwenden Sie das $route -Attribut (Vue Router 4.x): In Vue Router 4.x verwenden Sie das $route -Attribut direkt, um Parameter ohne zusätzliche Codierung zu erhalten.

Zusammenfassend wird empfohlen, Backend -Verarbeitungsmethoden zu priorisieren, um die Datenintegrität und Sicherheit der Daten zu gewährleisten. Wenn das Backend nicht geändert werden kann, wählen Sie die entsprechende Front-End-Verarbeitungsmethode basierend auf der Vue-Router-Version aus.

Das obige ist der detaillierte Inhalt vonWie geht es mit Special Character Escape -Themen in URL -Abfrageparametern in Vue um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!