Detaillierte Erläuterung der Lösung des Problems der Aktualisierung und des Verschwindens von Vue-Router-Routing-Parametern

In diesem Artikel wird hauptsächlich die Lösung für das Problem des Verschwindens von Vue-RouterRouting-Parametern vorgestellt. Interessierte Freunde können sich auf das

-Szenario beziehen Von Vue-Router implementierte Einzelseitenanwendung. Nachdem die Anmeldeseite die Anmeldeschnittstelle aufgerufen hat, gibt der Server die Benutzerinformationen zurück und leitet sie dann über router.push({name: 'index', params: res.data})-Komponente und zeigt Daten auf der Startseite an. Aber nach dem Aktualisieren der Seite verschwanden die Daten.

Lösung:

1, Sitzung& Server-Rendering

Die herkömmliche Lösung besteht darin, dass die Anmeldeseite und die Homepage zwei separate Seiten sind. Nach erfolgreicher Anmeldung generiert der Server eine Sitzung, die den Benutzerinformationen entspricht, rendert dann die Homepage-Daten und übergibt die Sitzungs-ID über den Antwortheader an den Browser die entsprechende Cookie-Datei. Auf diese Weise bringt der Browser bei der nächsten Seitenanforderung das entsprechende Cookie in den HTTP-Header und der Server ermittelt dann 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 Parameter der Anmeldeanforderung mitbringen, wenn die Route springt:

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
 }
})

Auf diese Weise werden die Anmeldeparameter in der URL gespeichert, etwa so: „http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx“, und dann wird die Anmeldeschnittstelle in der erstellten Datei aufgerufen Hook, 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 und dann die im Cookie gespeicherten Informationen abzurufen Erstellter Hook. Rufen Sie dann die Login-Schnittstelle auf. 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 nicht unterstützen Tatsächlich unterstützen IE8 und alle oben genannten Systeme 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.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Lösung des Problems der Aktualisierung und des Verschwindens von Vue-Router-Routing-Parametern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!