Implementierung der Vue-Nuxt-Anmeldeauthentifizierung

einführen

Aussortieren vom Mentor, Erstellen einer Zusammenfassung und Aufzeichnung

Link

https://auth.nuxtjs.org/api/options/#cookie

Start

Laut diesem Dokument wird nach der Verwendung von @nuxt/auth das Authentifizierungstoken standardmäßig im Cookie gespeichert, wenn das angegebene Cookie: false nicht angezeigt wird (dasselbe gilt oben für den lokalen Speicher).
Nachdem die Anmeldeschnittstelle erfolgreich war, wird das Token in der Form auth._token.{provider} gespeichert.

Die Schnittstelle entnimmt dann bei der Anforderung das Token dem Cookie und sendet es als Schnittstellenanmeldeinformation an den Server.

Verzeichnisstruktur

nuxt-dist ist die Datei, die von webpack nach jedem npm run dev oder npm run build generiert wird. Der darin enthaltene Code kann als der Code angesehen werden, den wir am Ende tatsächlich aufrufen ( Sie können hier auch direkt Änderungen vornehmen und Fehler beheben, die Änderungen werden jedoch bei jedem erneuten Ausführen des Projekts wiederhergestellt.

nuxt/auth hat mehrere Schemata, siehe beispielsweise nuxt-dist/auth/schemes/local.js
Es gibt mehrere Standardoptionen:

In dem Code, den wir geschrieben haben, haben wir $auth.loginWith verwendet, um es aufzurufen, aber tatsächlich ruft loginWith letztendlich login auf.

Dann schauen Sie sich den Login an, immer noch in nuxt-dist/auth/schemes/local.js

nuxt-dist ist die Datei, die von webpack nach jedem npm run dev oder npm run build generiert wird. Der Code hier kann als der Code angesehen werden, den wir am Ende tatsächlich aufrufen (Sie können ihn hier auch direkt ändern und debuggen, er wird jedoch bei jedem erneuten Ausführen des Projekts wiederhergestellt).
nuxt/auth hat mehrere Schemata, siehe beispielsweise nuxt-dist/auth/schemes/local.js
Es gibt mehrere Standardoptionen:

In dem Code, den wir geschrieben haben, haben wir $auth.loginWith verwendet, um es aufzurufen, aber tatsächlich ruft loginWith letztendlich login auf.

Dann schauen Sie sich den Login an, immer noch in nuxt-dist/auth/schemes/local.js

this.name in der Methode ist auth.strategy, also lokal, local1 usw., und setStrategy() in der obigen loginWith-Methode speichert die auth.strategy-Informationen lokal.
Nach erfolgreichem Abschluss wird tokenRequired standardmäßig auf true gesetzt und this.$auth.setToken wird aufgerufen. Diese Methode befindet sich in auth/schemes/auth.js

Bei dieser Methode

Bei dieser Methode wird _key in ._token.local zusammengestellt.
Diese Methode befindet sich in auth/storage.js

Schließlich ruft diese Methode die Methoden setCookie und serLocalStorage auf, speichert das Token in Cookies und im lokalen Speicher und wird in setCookie erneut zusammengesetzt, wobei cookies.prefix hinzugefügt wird, was standardmäßig Auth ist.

Schließlich wird es nach der Serialisierung im Cookie gespeichert.
Anschließend holt sich Axios diese direkt vom Cookir und versendet sie mit der Anfrage.

Die gesamte Anmelde- und Authentifizierungslogik sieht grundsätzlich so aus.

Gehen Sie weiter in den Code

Sie können auch mehrere Authentifizierungen in nuxt.config.js konfigurieren: {strategies: {local

Mit WeChat anmelden, mit Handynummer anmelden, mit Konto anmelden …

autoFetch

https://auth.nuxtjs.org/schemes/local
Benutzer abrufen
Das UTH-Modul speichert keine Informationen über den Benutzer, daher muss es eine Möglichkeit geben, die Benutzerinformationen beispielsweise beim Neuladen der Seite abzurufen. Hierfür ist der Benutzerendpunkt gedacht. Standardmäßig wird dies auch nach einem erfolgreichen Login aufgerufen.

Wenn user.autoFetch true ist (Standard), sendet endpoints.user unmittelbar nach einer erfolgreichen Anmeldung eine Anfrage. Dieser Endpunkt sollte mit JSON-Informationen für den jeweiligen Benutzer antworten, die direkt der Benutzereigenschaft zugewiesen sind.

Wenn Sie die Benutzerinformationen direkt aus der Anmeldesitzung zurückgeben möchten, setzen Sie user.autoFetch auf „false“, rufen Sie die Benutzerinformationen aus der loginWith-Antwort ab und übergeben Sie sie an setUser.

Wenn Sie das Abrufen von Benutzerinformationen vollständig deaktivieren möchten, setzen Sie endpoints.user: false. Dies bedeutet, dass der Endpunkt für Benutzerinformationen nie aufgerufen wird, aber es bedeutet auch, dass das Frontend nichts über den Benutzer weiß; this.$auth.user wird {} sein.

PS: Da die Schnittstelle ersetzt werden muss, wird der Benutzer automatisch eine Abfrage ausführen und der resultierende Fehler ist für die Entwicklung nicht förderlich. Sie können die Entwicklung Schritt für Schritt durch Kommentare durchführen.

Benutzer: {
          autoFetch: false,
      }, 

Proxy-Konfiguration

Die Back-End-Schnittstelle des Projekts basiert auf der Back-End-Low-Code-Plattform und der Java-Schnittstelle. Die Namen am Anfang der Schnittstellen sind inkonsistent, was über einen Proxy behandelt werden kann, und domänenübergreifende Probleme können ebenfalls gelöst werden.

	Achsen:
    // // Basis-URL:''
    Proxy: wahr,
    Präfix: '/',
    // Anmeldeinformationen: falsch,
  },
   Proxy: {
    '/biz': {
      Ziel: 'http://xxlb/',
      PfadNeu schreiben: {
        '^/biz': '/biz/',
        changeOrigin: true // gibt an, ob es domänenübergreifend ist}
    },
    '/vorne': {
      Ziel: 'http://xxlb/',
      PfadNeu schreiben: {
        '^/front': '/api/front',
        changeOrigin: true // gibt an, ob es domänenübergreifend ist}
    },

Abfangen von Anfragen

	Achsen:
    // // Basis-URL:''
    Proxy: wahr,
    Präfix: '/',
    // Anmeldeinformationen: falsch,
  },
   Proxy: {
    '/biz': {
      Ziel: 'http://xxlb/',
      PfadNeu schreiben: {
        '^/biz': '/biz/',
        changeOrigin: true // gibt an, ob es domänenübergreifend ist}
    },
    '/vorne': {
      Ziel: 'http://xxlb/',
      PfadNeu schreiben: {
        '^/front': '/api/front',
        changeOrigin: true // gibt an, ob es domänenübergreifend ist}
    },

Umgang mit Schnittstellen mit unterschiedlichen Präfixen

dev wird für die lokale Entwicklungsumgebung verwendet und kann bei der Bereitstellung auf dem Server nicht verwendet werden.
Sie definieren eine Datei, beispielsweise mit dem Namen apiPrefix.js
In dieser Datei listen Sie alle verschiedenen Schnittstellen und ihre Präfixkorrespondenz auf.

konstantes Temp = {
api: ['/front/login', 'xxxxxx', 'xxxxx'],
api2: ['/test', 'xxxxxx'],
xxx: […]
}

Dies entspricht der expliziten Auflistung aller Schnittstellen, die das Präfix verwenden müssen.
Beim Abfangen von Anforderungen von Axios wird die temporäre Datei gemäß der aktuellen Anforderungs-URL durchlaufen, bestimmt, zu welchem ​​Präfix sie gehört, und dann zusammengesetzt.
Für Anfragen, die in dieser Temperatur nicht gefunden werden können, ist standardmäßig kein Präfix erforderlich und sie können ignoriert werden.

Dies bietet drei Vorteile.
Erstens können Sie bei der Wartung auf einen Blick sehen, welche Ihrer Schnittstellen mit welchem ​​Präfix versehen werden müssen. Zweitens können Sie beim Initiieren einer Anfrage auf der Seite sicherstellen, dass dieselbe Aufrufmethode verwendet wird, ohne sie bei jeder URL ändern zu müssen.
Drittens: Wenn das Batch-Präfix später geändert wird, können Sie es problemlos ändern

Wenn die Produktionsumgebung andere Serverschnittstellen aufrufen muss, müssen bestimmte Regeln vorhanden sein. Wenn Regeln vorhanden sind, gleichen wir sie mit den Regeln ab und ändern sie dann.
Oder Teil einer Schnittstelle. In diesem Fall können wir auch eine ähnliche Methode wie oben verwenden, die nichts anderes ist als

konstantes Temp = {
http://10.0.0.1/api: ['/front/login', 'xxxxxx', 'xxxxx'],
http://10.0.0.1/api2: ['/test', 'xxxxxx'],
http://10.0.0.1/xxx: […],
…
http://10.0.1.111/api: ['/sth/xxx']
}

Erweitern Sie den Präfixbereich um Protokolle und Domänennamen

Dynamische Routing-Konfiguration

https://www.nuxtjs.cn/guide/routing
Sie werden feststellen, dass der Routenpfad mit dem Namen „users-id“ einen :id?-Parameter hat, der angibt, dass die Route optional ist. Wenn Sie es zu einer erforderlichen Route machen möchten, müssen Sie eine Datei „index.vue“ im Verzeichnis „users/_id“ erstellen.

nuxt-dist verpackt und generiert automatisch die Konfiguration

Umleitungs- und Authentifizierungsberechtigungen

https://auth.nuxtjs.org/guide/middleware
Was hier gesagt wird, ist, dass die Authentifizierungsberechtigungsüberprüfung global oder in jeder Route erfolgen kann. Kann auch ausgeschaltet werden, sodass die Middleware die Prüfung überspringt. Schließlich wird auch eine Nutzung im Gastmodus eingeführt, was bedeutet, dass Sie sich nicht anmelden müssen, um auf diese Route zuzugreifen. Wenn jedoch ein angemeldeter Benutzer auf diese Seite zugreift, wird er auf die von redirect.home festgelegte Route umgeleitet.

In einigen Szenarien ist für den Zugriff eine Anmeldung erforderlich, andernfalls werden Sie auf die /login-Seite umgeleitet. Nachdem wir die Verarbeitung abgeschlossen haben, können wir auth: false festlegen, um einige Seiten so zu handhaben, dass sie nicht zur Anmeldung umleiten. Beispielsweise generiert eine Seite, auf die ich gerade stoße, vor der Registrierung im Hintergrund einen Registrierungslink. Diese Seite erfordert keine Token-Informationen.

Dies ist das Ende dieses Artikels über die Implementierung der Vue-Nuxt-Anmeldeauthentifizierung. Weitere relevante Inhalte zur Vue-Nuxt-Anmeldeauthentifizierung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!