Importieren Sie auch [`axios`](https://github.com/axios/axios), um eine HTTP-Anfrage an den Server senden zu können:

 import axios from 'axios'

Bevor wir fortfahren, müssen wir der Datenbank einige Regeln hinzufügen, um die E-Mail ordnungsgemäß validieren zu können, wie unten gezeigt:

 "read" = "true"

Das bedeutet, dass die Datenbank von der Client-Seite ungehindert gelesen werden kann.

 "write" = "auth" !== null

Sie können nicht in die Datenbank schreiben, es sei denn, Sie sind ein authentifizierter Benutzer.

 "Users" = { "onIndex" : ["email"] }

Dies ermöglicht es uns, das Dokument „Benutzer“ mit einem Index von „E-Mail“ abzufragen. Das heißt, Sie können die Datenbank buchstäblich nach einer eindeutigen E-Mail filtern. Fügen Sie dann eine benutzerdefinierte berechnete Eigenschaft mit dem Namen "validations" hinzu, genau wie wir Methoden, berechnet usw. haben. Unter "validations" haben wir Methoden, um die erforderlichen Daten zu validieren, beginnend mit "email", wo es erforderlich ist und offensichtlich eine E-Mail sein muss . Außerdem möchten wir in der Lage sein, einem Benutzer mitzuteilen, wenn eine E-Mail bereits von jemand anderem entgegengenommen wurde, indem wir die Datenbank überprüfen, nachdem der Benutzer sie eingegeben hat, indem wir so genannte asynchrone Validatoren innerhalb eines benutzerdefinierten Validators verwenden und alles von [vuelidate. ](https://vuelidate.js.org/#sub-asynchronous-validation) Fragen Sie dann unter Unique die Datenbank mit Axios ab und verwenden Sie die standardmäßigen Object.keys, um die Antwort nur zurückzugeben, wenn ihre Länge 0 ist. Für das Alter fügen Sie den erforderlichen, numerischen Wert und einen Mindestwert von 18 hinzu, der `minVal zugewiesen wird ` als seine Eigenschaften.

 age: { required, numeric, minVal: minValue(18) }

Die Eigenschaften des Passworts sind erforderlich, wobei "minLen" eine Mindestlänge von 6 zugewiesen wird.

 password: { required, minLen: minLength(6) }

`confirmPassword`-Eigenschaften müssen grundsätzlich die gleichen wie das Passwort sein.

 confirmPassword: { sameAs: sameAs(vm => { return vm.password }) }

Um dem Benutzer mitzuteilen, dass die E-Mail vergeben ist, verwenden Sie „v-if“, um zu prüfen, ob „unique“ wahr oder falsch ist. Wenn wahr, bedeutet dies, dass die Länge des zurückgegebenen Objekts 0 ist und E-Mail weiterhin verwendet werden kann und umgekehrt. Auf die gleiche Weise können Sie mit `v-if` überprüfen, ob die Benutzereingabe eine echte E-Mail ist. Und für alle umgebenden divs auf der einzelnen Eingabe fügen wir eine ungültige Klasse hinzu, die aktiv wird, sobald ein Fehler an dieser Eingabe auftritt. Um die Validierungsereignisse an jede der Eingaben im HTML zu binden, verwenden wir [`$touch()`](https://vuelidate.js.org/#sub-without-v-model), wie bei der `email ` unten. „Alter“, „Passwort“ und „Passwort bestätigen“ werden auf ähnliche Weise wie „E-Mail“ an ihre HTML-Eingabe gebunden. Und wir deaktivieren die Schaltfläche "Senden", wenn in einer der Eingaben ein Fehler auftritt.

 <button type="submit" :disabled="$v.$invalid">create</button>

Hier ist ein vollständiges [CodePen-Beispiel](https://codepen.io/atanda1/pen/Yzyqrjv) für diesen vuelidate-Abschnitt.

## Authentifizierung Diese App ist ein SPA und wird nicht wie herkömmliche Websites neu geladen, daher verwenden wir Vuex als unsere einzige „Quelle der Wahrheit“, damit jede Komponente in unserer App den allgemeinen Authentifizierungsstatus kennt. Wir gehen zu unserer Store-Datei und erstellen sowohl die Anmelde- als auch die Anmeldemethode innerhalb von Aktionen. Die Antwort (`token` und `userId`), die wir erhalten, wenn wir die Benutzerdaten senden, wird in unserem Zustand gespeichert. Dies ist wichtig, da das Token verwendet wird, um zu wissen, ob wir zu irgendeinem Zeitpunkt in unserer App noch angemeldet sind oder nicht. Das „Token“, die „userId“ und der Benutzer werden im Status mit einem Anfangswert von null erstellt. Wir kommen viel später zum Benutzer, aber jetzt konzentrieren wir uns auf die ersten beiden.

 state: { idToken: null, userId: null, user: null }

Mutationen werden dann erstellt, um den Zustand bei Bedarf zu ändern.

authUser	Speichert das Token und die userId
storeUser	Speichert die Benutzerinformationen
clearAuthData	Löscht die Daten zurück in den Ausgangszustand

 mutations: { authUser (state, userData) { state.idToken = userData.token state.userId = userData.userId }, storeUser (state, user) { state.user = user }, clearAuthData (state) { state.idToken = null state.userId = null state.user = null } }

Für die Anmeldung/Anmeldung müssen wir für beide individuelle Aktionen erstellen, bei denen wir unsere Authentifizierungsanfragen an den Server senden. Danach wird unsere Antwort (Token und Benutzer-ID) von der Registrierung/Anmeldung an authUser übergeben und im lokalen Speicher gespeichert. Aber hier ist der knifflige Teil, was wir bei der Anmeldeaktion tun werden, ist insbesondere, nur die E-Mail-Adresse und das Passwort zu senden, die in der Authentifizierungsdatenbank registriert werden sollen. Im eigentlichen Sinne haben wir keinen Zugriff auf die Daten in dieser Authentifizierungsdatenbank, und wir haben außer E-Mail/Passwort keine unserer Anmeldedaten gesendet. Wir erstellen also eine weitere Aktion, um die vollständigen Anmeldedaten an eine andere Datenbank zu senden. In diesem separaten Datenbankdokument haben wir vollständigen Zugriff auf alle Informationen, die wir dort speichern. Wir nennen diese neue Aktion "storeUser". Wir gehen dann zu unserer Anmeldeaktion und senden das gesamte Objekt, das unsere Anmeldedaten enthält, an eine Datenbank, auf die wir jetzt über "storeUser" zugreifen können. **Hinweis:** Aus Sicherheitsgründen möchten Sie Ihr Benutzerpasswort möglicherweise nicht mit `storeUser` an die Datenbank senden. „storeUser“ fügt eine Abfrage hinzu, die unser neu erhaltenes Token und die Datenbank-API verwendet, während es in die Datenbank postet. Dies liegt daran, dass wir nicht in unsere Datenbank schreiben können, es sei denn, wir werden mit unserem Beweis (dem Token) authentifiziert. Das ist die Regel, die wir Firebase am Anfang gegeben haben, erinnerst du dich?

 “write” = “auth” !== null

Den vollständigen Code für Registrierungs-/Anmeldeaktionen finden Sie [hier](https://codepen.io/atanda1/pen/mdePKqj). Senden Sie dann sowohl die Registrierung als auch die Anmeldung von ihren Komponenten innerhalb der Methode "onSubmit" an die entsprechenden Aktionen im Geschäft.

 methods : { onSubmit () { const signupData = { email : this.email, name : this.name, age : this.age, password : this.password, confirmPassword : this.co nfirmPassword } this.$store.dispatch('signup', signupData) } } }

**Hinweis:** `signupData` enthält die Daten des Formulars. ## AuthGuard AuthGuard ist erforderlich, um zu verhindern, dass Benutzer, die nicht angemeldet sind, Zugriff auf das Dashboard erhalten, an das sie die Umfrage senden. Gehen Sie zur Routendatei und importieren Sie unseren Shop.

 import store from './store'

Wechseln Sie innerhalb der Route zum Pfad des Dashboards und fügen Sie Folgendes hinzu:

 const routes = [ { path: '/', component: WelcomePage }, { path: '/signup', component: SignupPage }, { path: '/signin', component: SigninPage }, { path: '/dashboard', component: DashboardPage, beforeEnter (to, from, next) { if (store.state.idToken) { next() } else { next('/signin') } } } ]

Alles, was dies tut, ist zu prüfen, ob es ein Token im Zustand gibt, wenn ja, geben wir Zugriff auf das Dashboard und umgekehrt. ## LogOut Um unsere Logout-Option zu erstellen, verwenden wir `clearAuth`, das wir zuvor unter `Mutationen` erstellt haben, das einfach sowohl das `Token` als auch die `userId` auf `null` setzt. Wir erstellen jetzt eine neue „Logout“-„Aktion“, die sich auf „clearAuth“ festlegt, den lokalen Speicher löscht und „router.replace(‘/‘)“ hinzufügt, um den Benutzer vollständig umzuleiten.

 actions: { logout ({commit}) { commit('clearAuth') localStorage.removeItem('token') localStorage.removeItem('userId') router.replace('/') } }

In der Header-Komponente haben wir eine `onLogout`-Methode, die unsere Logout-Aktion im Store auslöst.

 methods: { onLogout() { this.$store.dispatch('logout') } }

Wir fügen dann ein `@click` zu der Schaltfläche hinzu, die die `onLogout`-Methode auslöst, wie wir [hier](https://codepen.io/atanda1/pen/jObqKNd) sehen können.

 <ul @click="onLogout">Log Out</ul>

## UI_State Nachdem wir nun bedingten Zugriff auf das Dashboard gewährt haben, besteht der nächste Schritt darin, es aus der Navigationsleiste zu entfernen, sodass nur authentifizierte Benutzer es anzeigen können. Dazu würden wir unter den „Gettern“ eine neue Methode namens „ifAuthenticated“ hinzufügen, die prüft, ob das Token in unserem Zustand null ist. Wenn ein Token vorhanden ist, zeigt dies an, dass der Benutzer authentifiziert ist, und wir möchten, dass er die Umfrage-Dashboard-Option in der Navigationsleiste sieht.

 getters: { isAuthenticated (state) { return state.idToken !== null } }

Danach kehren Sie zur Header-Komponente zurück und erstellen eine Methode „auth“ unter „computed“, die an unser „isAuthenticated“ innerhalb der „Getter“ sendet, die wir gerade im Store erstellt haben. Dies bewirkt, dass "isAuthenticated" falsch zurückgeben würde, wenn kein Token vorhanden ist, was bedeutet, dass "auth" ebenfalls null wäre und umgekehrt.

 computed: { auth () { return this.$store.getters.ifAuthenticated } }

Danach fügen wir unserem HTML ein „v-if“ hinzu, um zu prüfen, ob „auth“ null ist oder nicht, um zu bestimmen, ob diese Option in der Navigationsleiste angezeigt wird.

 <li v-if='auth'> <router-link to="/dashboard">Dashboard</router-link> </li> <li v-if='!auth'> <router-link to="/signup">Register</router-link> </li> <li v-if='!auth'> <router-link to="/signin">Log In</router-link> </li>

- Sie finden den vollständigen Code des Abschnitts UI-Status [hier](https://codepen.io/atanda1/pen/QWjNxyo).

Automatische Anmeldung

Wenn wir unsere App neu laden, verlieren wir die Daten und werden abgemeldet, sodass wir von vorne beginnen müssen. Dies liegt daran, dass unser Token und unsere ID in Vuex gespeichert sind, was Javascript ist, und dies bedeutet, dass unsere App beim Aktualisieren mit dem Browser neu geladen wird.

Und schließlich werden wir das Token in unserem lokalen Speicher abrufen. Auf diese Weise können wir das Token des Benutzers im Browser haben, unabhängig davon, wann wir das Fenster aktualisieren, und eine Methode haben, die unseren Benutzer automatisch anmeldet, solange das Token noch gültig ist.

Eine neue AutoLogin actions erstellt, bei der wir das Token und die Benutzer- userId aus dem lokalen Speicher abrufen und unsere Daten an die Methode authUser in den Mutationen übergeben.

 actions : { AutoLogin ({commit}) { const token = localStorage.getItem('token') if (!token) { return } const userId = localStorage.getItem('userId') const token = localStorage.getItem('token') commit('authUser', { idToken: token, userId: userId }) } }

Wir gehen dann zu unserem App.vue und schreiben eine created Methode, die das autoLogin jedes Mal, wenn die App geladen wird, aus unserem Store sendet.

 created () { this.$store.dispatch('AutoLogin') }

Fetch_User_Data

Wir möchten den Benutzer auf dem Dashboard begrüßen, indem wir den Namen des Benutzers anzeigen. Und so wird eine weitere Aktion namens fetchUser erstellt, die zunächst wie gewohnt prüft, ob ein Token vorhanden ist. Anschließend holt es die E-Mail aus dem lokalen Speicher und fragt die Datenbank wie zuvor bei der E-Mail-Validierung ab.

Dies gibt ein Objekt zurück, das die Daten des Benutzers enthält, die ursprünglich während der Anmeldung übermittelt wurden. Wir konvertieren dieses Objekt dann in ein Array und übergeben es an die ursprünglich erstellte storeUser Mutation.

Danach erstellen wir einen weiteren Getter namens user , der den state.user zurückgibt, der bereits über storeUser .

 getters: { user (state) { return state.user }, isAuthenticated (state) { return state.idToken !== null } }

Zurück zum Dashboard erstellen wir eine neue berechnete Methode namens name , die state.user.name nur zurückgibt, wenn der Benutzer existiert.

Außerdem fügen wir die created berechnete Eigenschaft hinzu, um die Aktion fetchUser , sobald die Seite geladen ist. Wir verwenden dann das v-if in unserem HTML, um den Namen anzuzeigen, falls der Name existiert.

 <p v-if="name">Welcome, {{ name }} </p>

Send_Umfrage

Um die Umfrage zu senden, erstellen wir eine postData Aktion, die die Daten mithilfe der Datenbank-API mit dem Token an die Datenbank sendet, um dem Server anzuzeigen, dass der Benutzer angemeldet ist.

Wir kehren zur Dashboard-Komponente zurück und senden die Daten an unsere postData Aktion im Geschäft.

 methods : { onSubmit () { const postData = { price: this.price, long: this.long, comment: this.comment } console.log(postData) this.$store.dispatch('postData', postData) } }

Da haben wir es, wir haben viele nützliche Funktionen in unsere Demoanwendung implementiert, während wir mit unserem Firebase-Server kommunizieren. Hoffentlich verwenden Sie diese leistungsstarken Funktionen in Ihrem nächsten Projekt, da sie heute für die Erstellung moderner Web-Apps sehr wichtig sind.

Wenn Sie Fragen haben, können Sie diese im Kommentarbereich hinterlassen, und ich beantworte gerne jede einzelne davon!

• Die Demo für das Tutorial ist hier live.

Andere Ressourcen, die sich als nützlich erweisen können, sind:

• Weitere Informationen zu Firebase und den anderen angebotenen Diensten finden Sie in Chris Esplins Artikel „Was ist Firebase?“.
• Vuelidate ist eine wirklich schöne Bibliothek, in die Sie sich wirklich einarbeiten sollten. Sie sollten die Dokumentation durchlesen, um einen vollständigen Einblick zu erhalten. https://vuelidate.js.org/.
• Sie können Axios auch alleine erkunden, besonders wenn Sie es in größeren Projekten verwenden möchten.