Was soll ich tun, wenn die Routing-Parameter des Vue-Routers aktualisiert werden und verschwinden?

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

Lösung:

1. Sitzung und Server-Rendering

Die traditionelle Lösung besteht darin, dass die Anmeldeseite und die Homepage zwei separate Seiten sind. Nach erfolgreicher Anmeldung generiert der Server Benutzer Informationen, die der Sitzung entsprechen, rendern dann die Homepage-Daten, übergeben die Sitzungs-ID über den Antwortheader an den Browser und generieren 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 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
  }
})

Auf diese Weise werden die Anmeldeparameter in der URL gespeichert , etwa so: „http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx“, und rufen Sie dann die Anmeldeschnittstelle im erstellten Hook auf, 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 die Anmeldeschnittstelle aufzurufen. 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 Cookie-Daten ist problematischer, da die Schlüssel-Wert-Paare in Cookies Zeichenfolgen sind und mit „=" verknüpft sind und zusätzliche Methoden zum Betreiben von Cookies geschrieben werden müssen.

<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(';')
    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 höher 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 lokal speichern? 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 verweisen. 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

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn die Routing-Parameter des Vue-Routers aktualisiert werden und verschwinden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!