So richten Sie die Benutzerauthentifizierung mit React, Redux und Redux Saga ein

UPDATE (12.02.2019): Ich habe dieses Projekt kürzlich mit den neuesten React-Routern aktualisiert, dh Version 4.3.1, die React-Router-Dom ist. Bitte gehen Sie zu seinem Repository, um die Änderungen anzuzeigen.

In meinem vorherigen Blog habe ich geschrieben, wie man eine skalierbare Architektur in Node.js schreibt. Da ich Postman zum Testen der Funktionsweise dieser Plattform verwendet habe, hielt ich es für eine gute Idee, die clientseitige Implementierung durchzuführen. Um die Client-Seite zu schreiben, habe ich mich für den folgenden Tech-Stack entschieden:

  • Reagieren
  • Redux
  • Redux-Saga
  • Router reagieren

In diesem Beitrag wird davon ausgegangen, dass Sie die Reaktions- und Grundkonzepte von Redux und Redux-Saga bereits kennen.

Beginnen

Klonen Sie mein vorheriges Blog-Repository. CDin seinen Stammordner und ausführen npm install. Dadurch werden alle Abhängigkeiten installiert.

Zweitens installieren Sie Mongodbin Ihrer Maschine. Nach der Installation führen Sie den Mongo Server mit dem ausmongodBefehl in Ihrem Terminal, wenn es nicht als Dienst in Ihrem Computer gestartet wird.

Stellen Sie als Nächstes sicher, dass das Nodemon-Paket global auf Ihrem Computer installiert ist . Gehen Sie zum serverseitigen Ordner und führen Sie ihn ausnodemon index.jsum den Backend-Server auszuführen.

Jetzt, da unser Backend betriebsbereit ist, ist es Zeit, sich mit der clientseitigen Implementierung zu befassen.

Wenn Sie noch nicht installiert haben create-react-appInstallieren Sie es dann mit dem folgenden Befehl.

npm install create-react-app -g

Dieser Befehl wird installiert create-react-appglobal .

Erstellen Sie das Projekt

Jetzt ist es Zeit, ein Projekt zu erstellen. Verwenden:

create-react-app react-login

Dadurch wird ein neues Projekt mit dem Namen erstellt react-login. Gehen Sie weiter und cdin diesen Ordner. Öffne deinpackage.jsonDatei in Ihrem bevorzugten Editor und fügen Sie folgende Abhängigkeiten hinzu:

Wir benötigen keine zusätzlichen Eigenschaften in dieser package.jsonDatei. Wir können sie einfach entfernen, aber ich werde es so lassen wie es ist und vorwärts gehen, damit wir zu einem interessanten Teil in diesem Blog kommen.

Jetzt einfach ausführen:

npm install

Dadurch werden alle oben genannten Abhängigkeiten installiert.

Indexdatei

Öffnen Sie zunächst die index.jsDatei und platzieren Sie den Code unten in diese Datei.

In diesen Code importieren wir reactund react-dom. Dann importieren wir Routerund browserHistoryvon react-router. Diese werden für Routing-Zwecke benötigt, die ich später in der verwenden werderoutes/index.jsDatei. Als nächstes importieren wir Provider, dies wird verwendet, um untergeordnete Komponenten zu speichern.

configureStoreund routessind etwas, das wir als nächstes importieren werden und das ich in einer Sekunde implementieren werde. Importieren Sie sie einfach so wie sie sind und verwenden Sie sie wie oben gezeigt in dieser Datei.

Jetzt ist unsere Indexdatei eingerichtet.

Konfiguration speichern

Erstellen Sie einen neuen Ordner mit dem Namen storein der srcOrdner. Erstellen Sie in diesem neuen Ordner eine Datei mit dem Namen configureStore.js:und fügen Sie den folgenden Code in diese Datei ein.

Zuerst importieren wir createStore, was gewohnt sein createStorewird und applyMiddlewarewas verwendet wird, um Middleware auf unsere Store-Sagas in diesem Fall anzuwenden, aber wir werden später in diesem Blog darauf eingehen redux.

Wir importieren dann rootReducer- wir werden dies später erstellen. Im Moment einfach importieren und unverändert verwenden. Darauf folgt die Funktion configureStore, die ein Objekt zurückgibt, indem sie die createStoreFunktion aufruft und rootReducerals Parameter übergibt .

Schließlich export configureStorewird configureStorein der zuvor erstellten index.jsDatei verfügbar gemacht .

Nun, das ist aus dem Weg, mach weiter und erschaffe das src/reducersOrdner, erstellen Sie die Datei index.js und fügen Sie den folgenden Code in diese Datei ein.

Diese Datei ist dafür verantwortlich, den Rest der Reduzierungen in den Reduzierungsordner zu importieren, zu kombinieren und zu exportieren, damit sie zur Verwendung verfügbar sind configureStore.js. Wir werden Änderungen an dieser Datei vornehmen, wenn wir später in diesem Blog neue Reduzierungen hinzufügen.

Routing-Datei

Zeit für die Routendatei. Gehen Sie voran und erstellen Sie diesrc/routesOrdner und in diesem Ordner erstellen Sie eine index.jsDatei. Öffnen Sie es nun und fügen Sie den folgenden Code ein.

Das Hauptziel dieser Datei ist das Routing in unserem Projekt. Die Datei Importe React, Routeund IndexRoute. Danach brauchen wir einen Container, in diesem Fall importiere ich container/App, den wir bald schreiben werden. Als nächstes kommt RegisterPageeine Komponente, und das werden wir auch schreiben.

RouteWenn der übergeordnete Pfad im übergeordneten Element übereinstimmt, rendern wir einfach unseren AppContainer. Auf IndexRouteBenutzer wird angezeigt, RegisterPagewelche im AppContainer gerendert werden .

Container

Jetzt ist es Zeit für den Container. Machen Sie weiter und erstellen Sie einen neuen Ordner namens container. Erstellen Sie in diesem Ordner eine neue Datei mit dem Namen App.jsund fügen Sie den folgenden Code in diese Datei ein.

Das ist ziemlich einfach. Der Hauptzweck dieser Datei ist das Rendern der restlichen Komponenten.{this.props.children}dient diesem Zweck.

Anmeldung

Jetzt ist es Zeit für registerPage. Einen neuen Ordner erstellensrc/componentsund erstellen Sie eine Komponente im Komponentenordner mit dem NamenregisterPage.js. Fügen Sie den folgenden Code in diese Komponente ein.

Im Moment ist dies eine sehr einfache Komponente. Wir werden dies später bearbeiten, um ein Registrierungsformular hinzuzufügen und einige Funktionen hinzuzufügen.

Ausgabe

Nachdem Sie alle oben genannten Ordner und Dateien erstellt haben, führen Sie sie npm startin Ihrem Projekt aus und öffnen Sie sie//localhost:3000in Ihrem Browser. Sie sollten das folgende Ergebnis sehen können.

Wenn Sie hier auf Login klicken, wird nicht zur Login-Route weitergeleitet, die wir als Nächstes korrigieren.

Damit es funktioniert

Routing

Damit das Routing funktioniert, erstellen Sie zunächst eine neue Komponente im Komponentenordner. Nennen Sie es loginPage.jsund platzieren Sie den folgenden Code in dieser Komponente.

Diese Komponente ist sehr einfach. Es rendert grundlegende Inhalte und einen Link zum Registrieren der Komponente.

Öffnen Sie nun die routes.jsoben bereits erstellte Datei und nehmen Sie folgende Änderungen vor.

Ändern Sie die Indexroute in, LoginPageda Benutzer beim Besuch der Startseite auf der Anmeldekomponente landen sollen. Importieren Sie es vorher aus dem Komponentenordner.

Aktualisieren Sie nun Ihren Browser und Sie sollten zuerst sehen können loginPage. Wenn Sie auf den Link "Hier registrieren" klicken, registerPagesollte gerendert werden.

Jetzt haben wir die grundlegenden Routen.

Login und Registrierung

Anmeldung

Damit der Anmeldevorgang funktioniert, werde ich zuerst den Registrierungsprozess abwickeln, damit wir einige Benutzer in unsere Datenbank aufnehmen. Lassen Sie uns fortfahren components/registerPage.jsund es mit den folgenden Inhalten öffnen und aktualisieren.

Diese Datei scheint jetzt viel Code zu enthalten, aber es ist alles einfach. Zuerst importieren wirconnectum unsere storemit dem zu verbindenregisterPageKomponente. Dann importieren wirregisterUserActionwas wir als nächstes schreiben werden.

Innerhalb der renderFunktion überprüfe ich zuerst die Antwort vom Server, falls vorhanden, und weise dann Erfolgs- und Nachrichteneigenschaften zu, die vom Server empfangen werden. Dies kann eine separate Funktion sein, aber der Einfachheit halber habe ich sie in die renderFunktion eingefügt.

Als nächstes gibt es ein Anmeldeformular. Wenn der Benutzer auf die Registrierungsschaltfläche klickt, wird die onHandleRegistrationFunktion ausgelöst, mit der die vom Benutzer eingegebenen Daten aus dem Formular abgerufen werdendispatch registerUserActionmit ihren Daten als Parameter. Wir werden im nächsten Schritt Aktionen schreiben.

Damit der obige Code funktioniert, müssen mapStateToPropswir ihn wie am unteren Rand der Komponente ausführen und ihn registerPageam Ende mit der Komponente verbinden .

Aktionen

Jetzt ist es Zeit, Aktionen hinzuzufügen. Gehen Sie voran und erstellen Sie diesrc/actionsOrdner. Erstellen Sie dieindex.jsDatei und platzieren Sie den folgenden Code darin.

Dieser Code exportiert einige Konstanten, die wir während unseres gesamten Projekts verwenden werden.

Nun mach weiter und erstelle das authenticationActions.jsDatei im selben Ordner und platzieren Sie den folgenden Code darin.

Hier importiere ich die Indexdatei, die Konstanten exportiert, und gebe dann export registrationUserActionein Objekt mit Aktionstyp und Benutzerdaten zurück. Aktionstyp ist in diesem Fall REGISTER_USER. Diese Aktion wird ausgelöst, wenn ein Benutzer versucht, sich zu registrieren, und diese Aktion ist während unseres gesamten Projekts verfügbar, das wir in unseren Sagen anhören werden.

Sagas

Jetzt sind wir in der Phase, in der wir unsere Sagen in unser Projekt einführen können. Wenn Sie neu bei Redux-Saga sind, empfehle ich Ihnen, diesen Blog zu betreten, bevor Sie fortfahren.

Wenn Sie bereits über Sagen Bescheid wissen, erstellen Sie eine src/sagasOrdner. Erstellen Sie dieindex.jsDatei und platzieren Sie den folgenden Code in dieser Datei.

In der obigen Datei importiere ich zuerst forkvon effectsundwatchUserAuthenticationfrom watchers- was noch nicht existiert, aber wir werden diese Datei als nächstes erstellen. Dann exportiere ich einfach eine Generatorfunktion und gable die watchUserAuthentication.

Erstellen Sie nun eine watcher.jsDatei im selben Ordner wie oben und fügen Sie den folgenden Code in diese Datei ein.

Wieder importiere ich takeLatestWirkung von redux-saga, dann registerSagavon authenticationSaga.js, die wir als nächstes erstellen werden. Als nächstes actions/index.jsals Typen importieren .

Ich exportiere eine Generatorfunktion, die im Grunde auf die REGISTER_USERAktion achtet und einen Anruf tätigt registerSaga.

Lassen Sie uns nun die authenticatioSaga.jsSaga im selben Ordner wie oben erstellen und den folgenden Code in diese Datei einfügen.

In dieser Saga importiere ich noch ein paar Effekte - putund callvon redux-saga. Dann registerUserServicewird aus importiert service/authenticationService.js. Ich importiere alle Aktionen als Typen aus actions/index.js. Dann exportiere ich die Generatorfunktion registerSaga.

Diese Funktion ist für den Aufruf verantwortlich registerUserService, der einen Ajax-Aufruf an unseren Server ausführt, um einen neuen Benutzer zu registrieren - den ich nach diesem Schritt schreiben werde. Es erhält eine Antwort von registerUserServiceund setzt die REGISTER_USER_SUCCESSAktion. Wenn ein Fehler auftritt, wird die REGISTER_USER_ERRORAktion ausgeführt.

Importieren Sie die Sagen

Jetzt, da wir unsere Sagen haben, ist es Zeit, sie in unser Geschäft zu importieren. Öffnen store/configureStore.jsund aktualisieren Sie den Inhalt mit den folgenden Inhalten.

Hier bin ich zu importieren createSagaMiddleware, rootReducerund rootSaga. Dann configureStoreerstelle ich innerhalb der Funktion eine neue sagaMiddlewareund übergebe sie an die createStoreVerwendung der applyMiddlewareFunktion. Endlich leite ich die rootSaga.

Jetzt ist es Zeit, den src/servicesOrdner zu erstellen und einen neuen ersten Dienst zu erstellen . Nennen Sie esauthenticationService.jsund geben Sie den folgenden Code in diesen Dienst ein.

Diese Datei führt eine grundlegende Ajax-Anforderung mithilfe der Abruf-API mit einigen Parametern und einem Header aus. Es ist ein ziemlich selbsterklärender Service.

Reduzierstück

Nachdem wir eine Anfrage an den Server gestellt haben, ist es Zeit, diese Antwort in unserer Komponente zu erhalten. Dazu brauchen wir einen Reduzierer . Gehen Sie voran und erstellen Sie einereducers/registerReducer.jsDatei und platzieren Sie den folgenden Code darin.

Es ist eine einfache Reduzierungsfunktion, die den Status erhält und einen neuen Status zurückgibt. Es sucht nach REGISTER_USER_SUCCESSund REGISTER_USER_ERRORAktionen und gibt den neuen Status an die Komponente zurück.

Jetzt mach weiter und öffne das src/reducers/index.jsDatei und aktualisieren Sie es mit den folgenden Inhalten.

In diesem rootReducerwerde ich alle Reduzierungen importieren und sie dann vor dem Export kombinieren. Genau damit mache ich mich register.

Ausführen des aktualisierten Codes

Jetzt sind wir mit dem Registrierungsprozess fertig. Es ist Zeit, Ihren Browser zu aktualisieren, zur Registrierungsroute zu wechseln und einige Daten einzugeben. Wenn Sie eine vorhandene E-Mail-Adresse eingeben, sollte das folgende Ergebnis angezeigt werden.

Wenn Sie eine neue E-Mail-Adresse eingeben, sollten Sie zu weitergeleitet werden loginPage, die wir als Nächstes implementieren werden.

Einloggen

Es ist Zeit für uns, den Benutzer nach seiner Registrierung anzumelden. Gehen Sie voran und öffnen Siecomponents/loginPage.jsDatei und aktualisieren Sie es mit den folgenden Inhalten.

Diese Komponente ist so ziemlich die gleiche wie registerPage. Der einzige Unterschied ist, dass es versendetloginUserActionwas wir als nächstes schreiben werden. Ein weiterer Unterschied ist, dass ich, wenn die Antwort vom Server erfolgreich ist, eine erhalte JWT token. Ich speichere diesen Token in localStorage. Sie können eine andere Methode verwenden, aber für dieses Beispiel verwende ich diesen Ansatz.

Gehen Sie voran und öffnen Sie actions/authenticationActions.jsund aktualisieren Sie es mit den folgenden Inhalten.

Hier exportiere ich die neue loginUserActionFunktion mit LOGIN_USERAktionstyp und user payload.

Bevor Sie fortfahren, öffnen Sie die actions/index.jsDatei und aktualisieren Sie ihren Inhalt wie folgt.

Jetzt mach weiter und öffne das sagas/watchers.jsDatei und aktualisieren Sie den Inhalt mit den folgenden.

Hier importiere loginSagaund rufe ich es einfach auf, wenn es das empfängtLOGIN_USERAktion.

Wir haben noch loginSaganicht. Aus diesem Grund öffnen Sie diesagas/authenticationSaga.jsSaga und aktualisieren Sie den Inhalt mit den folgenden.

Hier bin ich zu importieren einen zusätzlichen Service - loginUserService, die ich als nächstes umsetzen werde - und dann den Export die neue Generatorfunktion genannt loginSaga, was ziemlich viel kostet das gleiche wie registerSaga.

Öffnen Sie nun die services/authenticationService.jsService und aktualisieren Sie seinen Inhalt mit den folgenden.

Hier füge ich loginUserService hinzu, der fast genauso funktioniert wie registerUserService, dh eine Ajax-Anfrage zum Anmelden des Benutzers sendet.

Nachdem wir erfolgreich eine Anfrage an den Server gesendet haben, ist es Zeit, eine Antwort von unserem Server auf unsere Anmeldekomponente zu erhalten. Erstellen Sie dazu einen neuen Reduzierer / loginReducer.js Reduzierer und fügen Sie den folgenden Code ein.

Es macht so ziemlich das Gleiche wie registerReducer- zuhören LOGIN_USER_SUCCESSund handeln LOGIN_USER_ERRORund den neuen Zustand wiederherstellen.

Öffnen Sie nun die reducers/index.jsDatei und aktualisieren Sie den Inhalt mit dem folgenden Code.

Hier importiere loginReducerund kombiniere ich es mit, registerbevor ich es als zurücksende rootReducer.

Aktualisieren Sie anschließend Ihren Browser und geben Sie eine E-Mail ein, die noch nicht registriert ist. Nach dem Drücken der Login-Taste sollte das folgende Ergebnis angezeigt werden.

Wenn Sie eine registrierte E-Mail-Adresse eingeben, sollte die Anfrage erfolgreich sein, aber Sie sollten noch nichts sehen, da ich die nicht implementiert habe dashboardPageKomponente. Auf diese wird erst nach erfolgreicher Authentifizierung zugegriffen. Nachdem wir das gesagt haben, lassen Sie es uns implementieren.

Dashboard-Seite

Erstellen Sie nun die components/dashboardPage.jsKomponente und platzieren Sie den folgenden Code in dieser Komponente.

Dies ist eine sehr einfache Komponente - sie gibt lediglich den DashboardText zurück.

Öffnen Sie nun die routes/index.jsrouten und aktualisieren Sie den Inhalt wie folgt.

Hier mache ich ein paar neue Sachen. Zuerst importiere ich ein dashboardPageund füge es hinzu route. Wenn diedashboardWenn auf die Route zugegriffen wird, wird die requireAuthFunktion ausgelöst. Diese Funktion prüft, ob der Benutzer ist loggedInoder nicht. Um das zu überprüfen, suche ichtokenin localStorage, die ich loginPagebei erfolgreicher Anmeldung in der Komponente gespeichert habe . Wenn es existiert, dashboardPagewird es an den Benutzer gerendert.

Wenn Sie nun die Seite in Ihrem Browser aktualisieren, eine registrierte E-Mail-Adresse eingeben und die Eingabetaste drücken, sollten die folgenden Ergebnisse angezeigt werden.

Es handelt sich also um ein vollständiges Anmeldesystem mit React, Redux und Redux-Saga. Wenn Sie das gesamte Projekt sehen möchten, klonen Sie dieses Repository.

Ich hoffe dir hat dieser Beitrag gefallen.