Vue hält den Benutzer angemeldet (verschiedene Token-Speichermethoden)

Im Frontend gibt es viele Möglichkeiten, den Benutzer angemeldet zu halten. Sie können dies tun, indem Sie Cookies, Sitzungen, Token und andere Informationen speichern. Unabhängig davon, welche Informationen der Hintergrund an das Frontend sendet, müssen wir diese Informationen im lokalen Browser speichern. Wenn der Browser die Anforderung erneut sendet, wirft er das Cookie mit dem Wert „Schlüssel“ = „Wert“ erneut an den Server. Der Server stellt fest, dass sich der Benutzer über das Cookie的Feld angemeldet hat, und verarbeitet die Benutzeranforderung entsprechend den Anforderungen. Andernfalls gibt er 400 zurück, um den Benutzer aufzufordern, sich zuerst anzumelden. Ich habe auch zuvor verwandte Artikel geteilt: Django: Cookie-Einstellungen und domänenübergreifende Problembehandlung, Django: Cookie mit Sitzung, Django: Tokenbasierte Authentifizierung. Als Frontend gibt es auch viele Möglichkeiten, diese Werte zu speichern. Sie können sie in Cookies, LocalStorage, SessionStorage oder im Vuex-Statusmanager speichern. Natürlich sind auch ihre Funktionen unterschiedlich, z. B. Vue: Der Unterschied und die Verwendung von LocalStorage und SessionStorage.

So setzen Sie Cookies

Django kann über HttpResponse來auf das Set_Cookie des Objekts antworten set_cookie，設置好對應的視圖和路由，只要通過瀏覽器訪問該路由，瀏覽器就會自動獲取到set_cookie值并存入到本地（當瀏覽器正在運行時通常都存在內存中，當瀏覽器關閉時通常會存入硬盤中）。

Nachteile von Cookies:

1. Geringe Menge an Cookie-Speicher; 2. Begrenzte Anzahl an Cookie-Speicher; 3. Erhöhte Netzwerkbelastung; 4. Es gibt Sicherheitsrisiken

LocalStorage und SessionStorage Token-Speicher

Wenn es in SessionStorage gespeichert ist, müssen wir beim Anmelden des Benutzers die Benutzernamen-ID und das Token in sessionStorage speichern. Dies ist auch in Vue einfach zu implementieren und kann über sessionStorage.setItem oder sessionStorage['token'] erreicht werden.

.then(res => {
                    wenn(res.data['code']==200){
                        localStorage.clear()
                        localStorage.setItem('info',1)
                        localStorage['Flagge']=1
                        // localStorage.setItem('flag',1)
                        sessionStorage.clear()
                        // sessionStorage['Benutzer-ID'] = JSON.stringify(res.data.userInfo.id)
                        sessionStorage.setItem('Benutzer-ID',JSON.stringify(res.data.userInfo.id))
                        Sitzungsspeicher['Token'] = JSON.stringify(res.data.token)
                        diese.$nachricht({
                            Meldung: „Anmeldung erfolgreich“,
                            Typ: „Erfolg“
                        })
                        dies.$router.push('/home')
                    }anders{
                        diese.$nachricht({
                            Meldung: „Falscher Benutzername oder falsches Passwort“,
                            Typ: „Warnung“
                        })
                        }
                })

Auf diese Weise können wir Session Storge in der Anwendung in den Entwicklertools des Browsers finden und überprüfen. Der soeben erhaltene Wert ist darin gespeichert. Ob er in LocalStorage oder SessionStorage gespeichert wird, hängt von den Projektanforderungen ab.

Die wichtigsten Unterschiede zwischen LocalStorage und SessionStorage:

LocalStorage bleibt dauerhaft im Browser gespeichert, sofern Sie es nicht aktiv löschen.

SessionStorage ist nur gültig, bevor das aktuelle Fenster geschlossen wird, und die darin gespeicherten Daten werden nach dem Schließen des Fensters automatisch gelöscht.

Vuex Store-Token

Initialisieren Sie das Token im Status der Store-Datei. Da die Daten im Status keine direkte Änderung unterstützen, müssen wir die Methoden setToken (Token festlegen) und getToken (Token abrufen) definieren. Dann können wir this.$store.commit('setToken',JSON.stringify(res.data.token)) in der Anmeldeschnittstelle einführen und das vom Hintergrund gesendete Token in Vuex und localStorage speichern. Warum müssen wir es in localStorage speichern? Der Status in Vuex existiert nicht mehr, sobald die Seite aktualisiert wird. Um den aktuellen Status beizubehalten, müssen wir den Status aus localStorage extrahieren und den Wert dann an Vuex übergeben.

Vue von „vue“ importieren
Vuex von „vuex“ importieren
 
Vue.Verwenden(Vuex)
 
exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    token:'' // Token initialisieren
  },
  Mutationen:
    //Token-Methode speichern //Token gleich dem von außen übergebenen Wert setzen setToken(state, token) {
        Status.Token = Token
        localStorage.token = token //Token synchron im localStorage speichern
      },
  },
 Getter: {
  //Token-Methode abrufen//Beurteilen Sie, ob ein Token vorhanden ist. Wenn nicht, weisen Sie es neu zu und geben Sie das Token in den Status zurück
  getToken(Status) {
    wenn (!state.token) {
      Status.Token = localStorage.getItem('Token')
    }
    Status-Token zurückgeben
    }
  },
  Aktionen: {
 
  }
})

Warum Vuex verwenden?

Vuex ist eher ein Statusmanager als ein Speichertool. Warum wird das Token in Vuex gespeichert? Der in Vuex gekapselte localStorage-Vorgang kann localStorage direkt zum Bedienen von Daten verwenden, kann jedoch keine Datenänderungen überwachen. Vuex ist ein globaler Speicher, der Änderungen im Datenstatus überwachen kann. Wenn sich der Vuex-Wert ändert, kann die Datenänderung entsprechend überwacht werden.

Damit ist dieser Artikel über Vue, das die Anmeldung von Benutzern aufrechterhält (verschiedene Methoden zur Token-Speicherung), abgeschlossen. Weitere Informationen dazu, wie Vue die Anmeldung von Benutzern aufrechterhält, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!