Lösung für das Problem, dass die Routing-Parameter des Vue-Routers nach der Aktualisierung verschwinden

In diesem Artikel wird hauptsächlich das Problem beschrieben, dass Vue-RouterRouting-Parameternach der Aktualisierung verschwinden

Szenario: Einzelseitige Anwendung, implementiert durch Vue-Router, Aufruf der Anmeldeseite Nach der Anmeldung an der Schnittstelle gibt der Server die Benutzerinformationen zurück, die dann über router.push({name: 'index', params: res.data}) und die Daten an die Homepage-Komponente übergeben werden wird auf der Homepage angezeigt. Aber nach dem Aktualisieren der Seite verschwanden die Daten.

Lösung:

1. Sitzung& Server-Rendering

Die traditionelle Lösung ist: Anmeldeseite und Homepage sind zwei separate Seiten. Nach erfolgreicher Anmeldung generiert der Server eine Sitzung entsprechend den Benutzerinformationen, rendert dann die Homepage-Daten, übergibt die Sitzungs-ID über den Antwortheader an den Browser und generiert das entsprechende Cookie Datei. Auf diese Weise bringt der Browser bei der nächsten Seitenanforderung das entsprechende Cookie in den HTTP-Header, und dann ermittelt der Server anhand der Sitzungs-ID im Cookie, ob der Benutzer angemeldet ist, und zeigt dann die Benutzerdaten an .

Wenn das Projekt die Idee der Front-End- und Back-End-Trennung übernimmt und der Server nur Schnittstellen bereitstellt und kein Server-Rendering durchführt, funktioniert diese Methode nicht.

2. $route.query

Wir können die Anmeldeanforderungsparameter beim Routing mitbringen:

router.push({name:'index', query:{username: 'xxx', password: 'xxxxxx'}})
...
this.$ajax({
 url: 'xxx',
 method: 'post',
 data: {
 username: this.$route.query.username,
 password: this.$route.query.password
 }
})

Einloggen wie folgt Die Parameter werden in der URL gespeichert werden, etwa so: „http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx“ und dann die Anmeldeschnittstelle im erstellten Hook aufrufen, um die Daten zurückzugeben.

Selbst wenn das Passwort MD5-verschlüsselt ist, ist es definitiv unvernünftig, vertrauliche Informationen wie Benutzername und Passwort in die URL aufzunehmen.

3. Cookie

Eine andere Möglichkeit besteht darin, die Anmeldeparameter im Cookie zu speichern, dann die im Cookie gespeicherten Informationen im erstellten Hook abzurufen und dann den aufzurufen Login-Schnittstelle. Es ist auch unzumutbar, den Benutzernamen und das Passwort in einem Cookie zu speichern. Die verbesserte Version besteht darin, dass der Server nach erfolgreicher Anmeldung ein Token zurückgibt und die Benutzerdaten innerhalb der Gültigkeitsdauer über das Token abgerufen werden.

Der Zugriff auf Daten durch Cookies ist problematischer, da das Schlüssel-Wert-Paar im Cookie eine Zeichenfolge ist und mit „=" verknüpft ist, was zusätzliche Methoden zum Betrieb des Cookies erfordert.

<script>
 function setCookie (name, value, exdays) {
 let date = new Date()
 date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000))
 let expires = "expires=" + date.toGMTString()
 document.cookie = name + "=" + value + "; " + expires
 }
 function getCookie (name) {
 name = name + "="
 let cookieArr = document.cookie.split(&#39;;&#39;)
 for (let i = 0; i < cookieArr.length; i++) {
  let cookie = cookieArr[i].trim()
  if (cookie.indexOf(name) === 0) {
  return cookie.slice(name.length)
  }
 }
 return ""
 }

4. HTML5-Webspeicher

Wenn es um Webspeicher geht, muss ich unbewusst denken, dass viele Browser ihn tatsächlich nicht unterstützen oben unterstützen localStorage und sessionStorage . Das Vue-Projekt unterstützt mindestens IE9, sodass Sie Webspeicher bedenkenlos nutzen können.

LocalStorage hat keine zeitliche Begrenzung für die Speicherung von Daten und sie werden nicht ungültig, es sei denn, sie werden aktiv gelöscht. SessionStorage wird ungültig, wenn die Seite oder der Browser geschlossen wird, was für dieses Szenario geeignet ist.

Wir können die Token-Informationen in sessionStorage speichern und dann bei jeder Aktualisierung der Seite Daten über das Token anfordern. Da das Token jedoch lokal gespeichert werden kann, warum nicht einfach häufig verwendete Daten direkt dort speichern? der Einheimische? Durch die Nutzung lokaler Daten können Client-Netzwerkanfragen reduziert und die Serverlast verringert werden.

Da localStorage und sessionStorage schreibgeschützt sind, können sie nicht direkt auf ein Objekt verwiesen werden. Sie können Object.assign() nicht zum Kopieren des Objekts verwenden, da der Wert zur Zeichenfolge „[object Object]“ wird, sodass Sie Attribute nur durch Schleifen zu sessionStorage hinzufügen können.

...
for (var key in res.data.customer) {
 sessionStorage[key] = res.data.customer[key]
} 
...

Die oben genannten Probleme sind bei meiner letzten Arbeit aufgetreten. Die endgültige Lösung bestand darin, sessionStorage zum Speichern von Daten zu verwenden. Wenn Sie eine bessere Lösung haben, können Sie mich gerne aufklären

Oben Das ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist. Ich hoffe auch, dass jeder Script Home unterstützt.

Das obige ist der detaillierte Inhalt vonLösung für das Problem, dass die Routing-Parameter des Vue-Routers nach der Aktualisierung verschwinden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!