De asemenea, importați [`axios`](https://github.com/axios/axios) pentru a putea trimite o solicitare HTTP către server:

 import axios from 'axios'

Înainte de a continua, va trebui să adăugăm câteva reguli la baza de date pentru a putea valida e-mailul așa cum ar trebui, așa cum se vede mai jos:

 "read" = "true"

Înseamnă că baza de date poate fi citită fără nicio piedică din partea clientului.

 "write" = "auth" !== null

Nu poți scrie în baza de date decât că ești un utilizator autentificat.

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

Acest lucru ne permite să interogăm documentul „utilizatori” cu un index de „e-mail”. Adică, puteți filtra literalmente baza de date pentru un e-mail unic. Apoi adăugați o proprietate personalizată calculată cu numele `validations`, așa cum avem metode, calculate, etc. Sub `validations` vom avea metode de validare a datelor necesare începând de la `email` unde este necesar și, evident, trebuie să fie un e-mail . De asemenea, dorim să putem spune unui utilizator când un e-mail a fost deja preluat de altcineva, verificând baza de date după ce utilizatorul a tastat-o ​​folosind ceva numit validatoare asincrone, toate într-un validator personalizat și totul este susținut de [vuelidate. ](https://vuelidate.js.org/#sub-asynchronous-validation) Apoi, sub unic, interogați baza de date folosind axios și utilizați Object.keys implicit pentru a returna răspunsul numai dacă lungimea acestuia este 0. Pentru vârstă, veți adăuga valoarea necesară, numerică și o valoare minimă de 18 care este atribuită lui `minVal. ` ca proprietățile sale.

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

Proprietățile parolei sunt necesare, cu o lungime minimă de 6 atribuită lui `minLen`.

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

Proprietățile `confirmPassword` trebuie să fie practic aceleași cu parola.

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

Pentru a spune utilizatorului că e-mailul este preluat, utilizați `v-if` pentru a verifica dacă `unique` este adevărat sau fals. Dacă este adevărat, înseamnă că lungimea obiectului returnat este 0, iar e-mailul poate fi folosit în continuare, precum și invers. În același mod, puteți verifica dacă introducerea utilizatorului este un e-mail real folosind `v-if`. Și pentru toate div-urile din jur pe intrarea individuală, vom adăuga o clasă de invalid care devine activă odată ce apare o eroare la intrarea respectivă. Pentru a lega evenimentele de validare la fiecare dintre intrările din HTML, folosim [`$touch()`](https://vuelidate.js.org/#sub-without-v-model) așa cum se vede cu `email ` mai jos. `Vârsta`, `parola` și `confirmPassword` vor fi legate de intrarea lor HTML într-un mod similar cu `e-mailul`. Și vom face butonul „Trimitere” inactiv dacă există o eroare în oricare dintre intrări.

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

Iată un [exemplu CodePen] complet (https://codepen.io/atanda1/pen/Yzyqrjv) pentru această secțiune vuelidate.

## Autentificare Această aplicație este un SPA și nu se reîncarcă ca site-urile tradiționale, așa că vom folosi Vuex, ca „sursă de adevăr” unică, pentru a permite fiecărei componente din aplicația noastră să fie conștientă de starea generală de autentificare. Mergem la fișierul magazinului nostru și creăm atât metoda de conectare/înregistrare în cadrul acțiunilor. Răspunsul (`token` și `userId`) primit când trimitem datele utilizatorilor, vor fi stocate în starea noastră. Acest lucru este important deoarece simbolul va fi folosit pentru a ști dacă suntem încă conectați sau nu în orice moment în aplicația noastră. `Token`, `userId` și utilizatorul sunt create în starea cu o valoare inițială nulă. Vom ajunge la utilizator mult mai târziu, dar deocamdată ne vom concentra pe primele două.

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

Mutațiile sunt apoi create pentru a schimba starea atunci când este necesar.

authUser	Salvează token-ul și userId
storeUser	Stochează informațiile despre utilizator
clearAuthData	Șterge datele înapoi la starea inițială

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

Pentru înregistrare/conectare, va trebui să creăm acțiuni individuale pentru ambele, unde trimitem cererile noastre de autentificare către server. După care răspunsul nostru (token și userId) de la înregistrare/conectare este trimis la authUser și salvat în stocarea locală. Dar iată partea dificilă, ceea ce vom face cu acțiunea de înregistrare în special este să trimitem doar e-mailul și parola pentru a fi înregistrate în baza de date de autentificare. În sens real, nu avem acces pentru a folosi datele din această bază de date de autentificare și nu am trimis niciuna dintre datele noastre de înregistrare în afară de e-mail/parolă. Deci, ceea ce vom face este să creăm o altă acțiune pentru a trimite datele complete de înregistrare către o altă bază de date. În acest document separat al bazei de date, vom avea acces complet la toate informațiile pe care alegem să le salvăm acolo. Vom numi această nouă acțiune se numește `storeUser`. Apoi mergem la acțiunea noastră de înregistrare și trimitem întregul obiect care conține datele noastre de înregistrare la o bază de date la care avem acces acum prin `storeUser`. **Notă:** Este posibil să nu doriți să trimiteți parola utilizatorului cu `storeUser` la baza de date din motive de securitate. `storeUser` adaugă o interogare folosind token-ul și API-ul de bază de date recent obținute în timpul postării în baza de date. Acest lucru se datorează faptului că nu putem scrie în baza noastră de date, cu excepția faptului că suntem autentificați cu dovada noastră (jetonul). Aceasta este regula pe care am dat-o la Firebase la început, vă amintiți?

 “write” = “auth” !== null

Codul complet pentru acțiunile de înscriere/conectare este chiar [aici](https://codepen.io/atanda1/pen/mdePKqj). Apoi trimiteți atât înregistrarea, cât și conectarea din componentele lor în cadrul metodei `onSubmit` la acțiunile respective din magazin.

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

**Notă:** `signupData` conține datele formularului. ## AuthGuard Este nevoie ca AuthGuard să împiedice utilizatorii care nu sunt autentificați să aibă acces la tabloul de bord unde vor trimite sondajul. Accesați fișierul de rută și importați magazinul nostru.

 import store from './store'

În cadrul traseului, accesați calea tabloului de bord și adăugați următoarele:

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

Tot ce face acest lucru este să verificăm dacă există un token în stare, dacă da, dăm acces la tabloul de bord și invers. ## Deconectare Pentru a crea opțiunea noastră de deconectare, vom folosi `clearAuth` pe care l-am creat mai devreme sub `mutations`, care doar setează atât `token`, cât și `userId` la `null`. Acum creăm o nouă „acțiune de deconectare”, care se angajează la „clearAuth”, șterge spațiul de stocare local și adăugăm „router.replace('/')” pentru a redirecționa complet utilizatorul.

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

În componenta antet, avem o metodă `onLogout` care trimite acțiunea noastră de deconectare în magazin.

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

Apoi adăugăm un `@click` la butonul care declanșează metoda `onLogout` așa cum putem vedea [aici](https://codepen.io/atanda1/pen/jObqKNd).

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

## UI_State Acum că am acordat acces condiționat la tabloul de bord, următorul pas este să îl eliminați din bara de navigare, astfel încât numai utilizatorii autentificați să îl poată vizualiza. Pentru a face asta, am adăuga o nouă metodă sub `getters` numită `ifAuthenticated` care verifică dacă token-ul din starea noastră este nul. Când există un simbol, acesta arată că utilizatorul este autentificat și dorim ca acesta să vadă opțiunea tabloului de bord al sondajului în bara de navigare.

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

După care, vă întoarceți la componenta antet și creați o metodă `auth` sub computed, care trimite către `isAuthenticated` din `getters` pe care tocmai le-am creat în magazin. Ceea ce face acest lucru este că `isAuthenticated` va returna false dacă nu există un simbol, ceea ce înseamnă că `auth` ar fi, de asemenea, nul și invers.

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

După aceasta, adăugăm un `v-if` la HTML-ul nostru pentru a verifica dacă `auth` este nul sau nu, determinând dacă acea opțiune va apărea pe bara de navigare.

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

- Veți găsi codul complet al secțiunii UI State [aici](https://codepen.io/atanda1/pen/QWjNxyo).

Logare automata

Când ne reîncărcăm aplicația, pierdem datele și suntem deconectați, fiind nevoiți să o luăm de la capăt. Acest lucru se datorează faptului că jetonul și ID-ul nostru sunt stocate în Vuex, care este javascript, și asta înseamnă că aplicația noastră este reîncărcată cu browserul când este reîmprospătată.

Și, în sfârșit, ceea ce vom face este să recuperăm jetonul din stocarea noastră locală. Procedând astfel, putem avea jetonul utilizatorului în browser, indiferent de momentul în care reîmprospătăm fereastra și putem avea o metodă de autentificare automată a utilizatorului, în măsura în care jetonul este încă valabil.

Este creată o nouă metodă de actions numită AutoLogin , în care vom obține token-ul și userId -ul din stocarea locală și vom trimite datele noastre la metoda authUser în mutații.

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

Apoi mergem la App.vue și scriem o metodă created , care va trimite autoLogin din magazinul nostru de fiecare dată când aplicația este încărcată.

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

Preluare_date_utilizator

Dorim să salutăm utilizatorul pe tabloul de bord afișând numele utilizatorului. Și astfel, este creată o altă acțiune numită fetchUser care verifică mai întâi dacă există un token ca de obicei. Apoi, primește e-mailul din stocarea locală și interogează baza de date așa cum sa făcut mai devreme cu validarea e-mailului.

Aceasta returnează un obiect care conține datele utilizatorului trimise inițial în timpul înscrierii. Apoi convertim acest obiect într-o matrice și îl trimitem la mutația storeUser creată inițial.

După care creăm un alt getter numit user care returnează state.user deja comis prin storeUser .

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

Înapoi la tabloul de bord, creăm o nouă metodă calculată numită name care returnează state.user.name numai dacă utilizatorul există.

Și vom adăuga, de asemenea, proprietatea calculată created pentru a trimite acțiunea fetchUser odată ce pagina este încărcată. Apoi folosim v-if în HTML-ul nostru pentru a afișa numele dacă numele există.

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

Send_Survey

Pentru a trimite sondajul, vom crea o acțiune postData care trimite datele la baza de date folosind API-ul bazei de date, cu simbolul pentru a arăta serverului că utilizatorul este conectat.

Ne întoarcem la componenta tabloului de bord și trimitem datele la acțiunea noastră postData din magazin.

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

Iată-l, avem o mulțime de funcții utile implementate în aplicația noastră demonstrativă în timp ce comunicăm cu serverul nostru Firebase. Sperăm că veți folosi aceste funcții puternice în următorul proiect, deoarece sunt foarte esențiale pentru construirea de aplicații web moderne astăzi.

Dacă aveți întrebări, le puteți lăsa în secțiunea de comentarii și voi răspunde cu plăcere la fiecare dintre ele!

• Demo-ul pentru tutorial este live aici.

Alte resurse care se pot dovedi utile includ:

• Pentru a înțelege mai multe despre Firebase și despre celelalte servicii pe care le oferă, consultați articolul lui Chris Esplin, „Ce este Firebase?”
• Vuelidate este o bibliotecă foarte frumoasă în care ar trebui să te uiți cu adevărat. Ar trebui să citiți documentația acesteia pentru a obține o perspectivă completă.https://vuelidate.js.org/.
• De asemenea, puteți explora axios singur, mai ales dacă doriți să îl utilizați în proiecte mai mari.