Zaimportuj także [`axios`](https://github.com/axios/axios), aby móc wysłać żądanie HTTP do serwera:

 import axios from 'axios'

Zanim przejdziemy dalej, musimy dodać kilka reguł do bazy danych, aby móc zweryfikować e-mail tak, jak powinniśmy, tak jak pokazano poniżej:

 "read" = "true"

Oznacza to, że baza danych może być odczytywana bez przeszkód ze strony klienta.

 "write" = "auth" !== null

Nie możesz pisać w bazie danych, chyba że jesteś uwierzytelnionym użytkownikiem.

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

To pozwala nam odpytywać dokument `users` indeksem `email`. Oznacza to, że możesz dosłownie przefiltrować bazę danych pod kątem unikalnego e-maila. Następnie dodaj niestandardową obliczoną właściwość o nazwie `validations`, tak jak mamy metody, obliczoną itd. W `validations` będziemy mieć metody do walidacji niezbędnych danych, zaczynając od `email` tam, gdzie jest to wymagane i oczywiście musi to być e-mail . Ponadto chcemy móc powiedzieć użytkownikowi, że wiadomość e-mail została już zajęta przez kogoś innego, sprawdzając bazę danych po wpisaniu jej przez użytkownika za pomocą czegoś, co nazywa się walidatorami asynchronicznymi, wszystko w ramach niestandardowego walidatora i wszystko to jest obsługiwane przez [vuelidate. ](https://vuelidate.js.org/#sub-asynchronous-validation) Następnie pod opcją unique, odpytaj bazę danych za pomocą axios i użyj domyślnych klawiszy Object.keys, aby zwrócić odpowiedź tylko wtedy, gdy jej długość wynosi 0. Dla wieku dodasz wymaganą, liczbową i minimalną wartość 18, która jest przypisana do `minVal ` jako jego właściwości.

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

Wymagane są właściwości hasła, z minimalną długością 6 przypisaną do `minLen`.

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

Właściwości `confirmPassword` są zasadniczo takie same jak hasło.

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

Aby poinformować użytkownika, że ​​wiadomość e-mail jest zajęta, użyj opcji „v-if”, aby sprawdzić, czy „unikalny” jest prawdą, czy fałszem. Jeśli prawda, oznacza to, że długość zwróconego obiektu wynosi 0, a e-mail może być nadal używany i na odwrót. W ten sam sposób możesz sprawdzić, czy dane wejściowe użytkownika są rzeczywistymi wiadomościami e-mail, używając `v-if`. A dla wszystkich otaczających elementów div na poszczególnych danych wejściowych dodamy klasę nieprawidłowych danych, która stanie się aktywna, gdy wystąpi błąd na tym wejściu. Aby powiązać zdarzenia walidacji z każdym wejściem w kodzie HTML, używamy [`$touch()`](https://vuelidate.js.org/#sub-without-v-model), jak widać w `email ` poniżej. `Wiek`, `hasło` i `confirmPassword` zostaną przypisane do ich danych wejściowych HTML w podobny sposób jak `e-mail`. Jeśli w którymkolwiek z danych wejściowych wystąpi błąd, przycisk „Prześlij” będzie nieaktywny.

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

Oto kompletny [przykład CodePen](https://codepen.io/atanda1/pen/Yzyqrjv) dla tej sekcji vuelidate.

## Uwierzytelnianie Ta aplikacja jest SPA i nie ładuje się ponownie jak tradycyjne strony, więc będziemy używać Vuex jako naszego jedynego „źródła prawdy”, aby każdy komponent naszej aplikacji był świadomy ogólnego stanu uwierzytelniania. Przechodzimy do naszego pliku sklepu i tworzymy obie metody logowania/rejestracji w ramach akcji. Odpowiedź (`token` i `userId`) otrzymana, gdy wysyłamy dane użytkowników, będzie przechowywana w naszym stanie. Jest to ważne, ponieważ token będzie używany do sprawdzenia, czy nadal jesteśmy zalogowani, czy nie w dowolnym momencie naszej aplikacji. Token, userId i użytkownik są tworzone w stanie o początkowej wartości null. Do użytkownika dojdziemy znacznie później, ale na razie skupimy się na dwóch pierwszych.

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

Następnie tworzone są mutacje, aby w razie potrzeby zmienić stan.

authUser	Zapisuje token i userId
storeUser	Przechowuje informacje o użytkowniku
clearAuthData	Wymazuje dane z powrotem do stanu początkowego

 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 } }

Aby zarejestrować się/zalogować się, będziemy musieli utworzyć indywidualne akcje dla obu, w których wysyłamy nasze żądania uwierzytelnienia do serwera. Po czym nasza odpowiedź (token i userId) z rejestracji/logowania jest przekazywana do authUser i zapisywana w magazynie lokalnym. Ale oto trudna część, to, co zrobimy z akcją rejestracji, to w szczególności wysłanie tylko adresu e-mail i hasła do zarejestrowania w bazie danych uwierzytelniania. W rzeczywistości nie mamy dostępu do danych w tej bazie danych uwierzytelniających i nie wysłaliśmy żadnych danych rejestracyjnych oprócz adresu e-mail/hasła. Więc co zrobimy, to stworzymy kolejną akcję, aby wysłać kompletne dane rejestracyjne do innej bazy danych. W tym oddzielnym dokumencie bazy danych będziemy mieć pełny dostęp do wszystkich informacji, które zdecydujemy się tam zapisać. Nazwiemy to nowe działanie jako `storeUser` Następnie przechodzimy do naszej akcji rejestracji i wysyłamy cały obiekt zawierający nasze dane rejestracji do bazy danych, do której mamy teraz dostęp poprzez `storeUser`. **Uwaga:** Możesz nie chcieć wysyłać hasła użytkownika z `storeUser` do bazy danych ze względów bezpieczeństwa. `storeUser` dodaje zapytanie przy użyciu naszego nowo otrzymanego tokena i API bazy danych podczas wysyłania do bazy danych. Dzieje się tak, ponieważ nie możemy pisać do naszej bazy danych, z wyjątkiem tego, że jesteśmy uwierzytelnieni za pomocą naszego dowodu (token). Taką zasadę podaliśmy Firebase na początku, pamiętasz?

 “write” = “auth” !== null

Pełny kod działań związanych z rejestracją/logowaniem znajduje się [tutaj](https://codepen.io/atanda1/pen/mdePKqj). Następnie wyślij zarówno rejestrację, jak i logowanie z ich komponentów w ramach metody `onSubmit` do odpowiednich akcji w sklepie.

 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) } } }

**Uwaga:** `signupData` zawiera dane formularza. ## AuthGuard Istnieje potrzeba AuthGuard, aby uniemożliwić użytkownikom niezalogowanym dostęp do pulpitu nawigacyjnego, w którym wyślą ankietę. Przejdź do pliku trasy i zaimportuj nasz sklep.

 import store from './store'

W ramach trasy przejdź do ścieżki pulpitu nawigacyjnego i dodaj następujące elementy:

 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') } } } ]

Wszystko po to, aby sprawdzić, czy w stanie jest token, jeśli tak, to dajemy dostęp do dashboardu i odwrotnie. ## LogOut Aby utworzyć naszą opcję wylogowania, użyjemy `clearAuth`, który stworzyliśmy wcześniej w `mutations`, który po prostu ustawia zarówno `token` jak i `userId` na `null`. Tworzymy teraz nowe `logout` `action` , które zobowiązuje się do `clearAuth`, usuwa lokalną pamięć i dodaje `router.replace('/')`, aby całkowicie przekierować użytkownika.

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

W komponencie nagłówka mamy metodę `onLogout`, która wywołuje naszą akcję wylogowania w sklepie.

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

Następnie do przycisku dodajemy `@click`, który uruchamia metodę `onLogout`, jak widać [tutaj](https://codepen.io/atanda1/pen/jObqKNd).

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

## UI_State Teraz, gdy daliśmy warunkowy dostęp do pulpitu nawigacyjnego, następnym krokiem jest usunięcie go z paska nawigacyjnego, aby tylko uwierzytelnieni użytkownicy mogli go zobaczyć. Aby to zrobić, dodamy nową metodę pod `getterami` o nazwie `ifAuthenticated`, która sprawdza, czy token w naszym stanie jest pusty. Gdy istnieje token, oznacza to, że użytkownik jest uwierzytelniony i chcemy, aby widzieli opcję pulpitu nawigacyjnego ankiety na pasku nawigacyjnym.

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

Następnie wracasz do komponentu nagłówka i tworzysz metodę `auth` pod obliczone, która wysyła do naszego `isAuthenticated` w ramach `getterów`, które właśnie stworzyliśmy w sklepie. Powoduje to, że `isAuthenticated` zwróci false, jeśli nie ma tokena, co oznacza, że ​​`auth` również będzie miało wartość null i na odwrót.

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

Następnie dodajemy `v-if` do naszego kodu HTML, aby sprawdzić, czy `auth` ma wartość null, czy nie, określając, czy ta opcja pojawi się na pasku nawigacyjnym.

 <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>

- Pełny kod sekcji Stan interfejsu użytkownika znajdziesz [tutaj] (https://codepen.io/atanda1/pen/QWjNxyo).

Automatyczne logowanie

Kiedy ponownie ładujemy naszą aplikację, tracimy dane i zostajemy wylogowani, i musimy zaczynać od nowa. Dzieje się tak dlatego, że nasz token i identyfikator są przechowywane w Vuex, który jest javascript, a to oznacza, że ​​nasza aplikacja jest ponownie ładowana z przeglądarką po odświeżeniu.

I na koniec, to, co zrobimy, to pobranie tokena z naszej lokalnej pamięci. W ten sposób możemy mieć token użytkownika w przeglądarce niezależnie od tego, kiedy odświeżymy okno, i mieć metodę automatycznego logowania naszego użytkownika, o ile token jest nadal ważny.

Powstaje nowa metoda actions o nazwie AutoLogin , w której pobieramy token i identyfikator użytkownika z lokalnego magazynu i authUser userId mutacjach.

 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 }) } }

Następnie przechodzimy do naszego App.vue i piszemy created metodę, która autoLogin z naszego sklepu za każdym razem, gdy aplikacja zostanie załadowana.

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

Pobierz_dane_użytkownika

Chcemy powitać użytkownika na desce rozdzielczej, wyświetlając jego nazwę. W ten sposób tworzona jest kolejna akcja o nazwie fetchUser , która najpierw jak zwykle sprawdza, czy istnieje token. Następnie pobiera wiadomość e-mail z pamięci lokalnej i wysyła zapytanie do bazy danych, tak jak to zrobiono wcześniej, z weryfikacją wiadomości e-mail.

Zwraca obiekt zawierający dane użytkownika przesłane początkowo podczas rejestracji. Następnie przekształcamy ten obiekt w tablicę i zatwierdzamy go w pierwotnie utworzonej mutacji storeUser .

Następnie tworzymy kolejny getter o nazwie user , który zwraca state.user już zadeklarowany przez storeUser .

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

Wracając do dashboardu, tworzymy nową metodę obliczaną o nazwie name , która zwraca state.user.name tylko wtedy, gdy użytkownik istnieje.

Dodamy również created właściwość obliczoną, aby wywołać akcję fetchUser po załadowaniu strony. Następnie używamy v-if w naszym HTML, aby wyświetlić nazwę, jeśli nazwa istnieje.

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

Wyślij_ankietę

Aby wysłać ankietę, utworzymy akcję postData , która wyśle ​​dane do bazy danych za pomocą interfejsu API bazy danych, z tokenem pokazującym serwer, na którym użytkownik jest zalogowany.

Wracamy do komponentu dashboardu i wysyłamy dane do naszej akcji postData w sklepie.

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

Mamy to, mamy wiele przydatnych funkcji zaimplementowanych w naszej aplikacji demonstracyjnej podczas komunikacji z naszym serwerem Firebase. Mamy nadzieję, że będziesz korzystać z tych zaawansowanych funkcji w swoim następnym projekcie, ponieważ są one bardzo ważne w dzisiejszym tworzeniu nowoczesnych aplikacji internetowych.

Jeśli masz jakieś pytania, możesz je zostawić w sekcji komentarzy, a ja z przyjemnością odpowiem na każde z nich!

• Demo samouczka jest dostępne tutaj.

Inne zasoby, które mogą okazać się przydatne, obejmują:

• Aby dowiedzieć się więcej o Firebase i innych oferowanych przez nią usługach, zapoznaj się z artykułem Chrisa Esplina „Co to jest Firebase?”
• Vuelidate to naprawdę fajna biblioteka, w której naprawdę powinieneś się zagłębić. Powinieneś przeczytać jego dokumentację, aby uzyskać pełny wgląd.https://vuelidate.js.org/.
• Możesz także samodzielnie eksplorować axios, zwłaszcza jeśli chcesz go wykorzystać w większych projektach.