Importa anche [`axios`](https://github.com/axios/axios) per poter inviare una richiesta HTTP al server:

 import axios from 'axios'

Prima di procedere, dovremo aggiungere alcune regole al database per poter convalidare l'e-mail come dovremmo, proprio come mostrato di seguito:

 "read" = "true"

Ciò significa che il database può essere letto senza alcun ostacolo dal lato client.

 "write" = "auth" !== null

Non puoi scrivere sul database se non sei un utente autenticato.

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

Questo ci permette di interrogare il documento `users` con un indice di `email`. Cioè, puoi letteralmente filtrare il database per un'e-mail univoca. Quindi aggiungi una proprietà calcolata personalizzata con il nome `convalide` proprio come abbiamo metodi, calcolato, ecc. Sotto `convalide` avremo metodi per convalidare i dati necessari a partire da `email` dove è richiesto e ovviamente deve essere un'e-mail . Inoltre, vogliamo essere in grado di dire a un utente quando un'e-mail è già stata presa da qualcun altro, controllando il database dopo che l'utente lo ha digitato utilizzando qualcosa chiamato validatori asincroni, il tutto all'interno di un validatore personalizzato ed è tutto supportato da [vuelidate. ](https://vuelidate.js.org/#sub-asynchronous-validation) Quindi, in unique, interroga il database usando axios e usa il valore predefinito Object.keys per restituire la risposta solo se la sua lunghezza è 0. Per l'età, aggiungerai un valore obbligatorio, numerico e un valore minimo di 18 assegnato a `minVal ` come sue proprietà.

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

Le proprietà della password sono obbligatorie, con una lunghezza minima di 6 assegnata a `minLen`.

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

Le proprietà di `confirmPassword` devono essere sostanzialmente le stesse della password.

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

Per dire all'utente che l'e-mail è stata presa, usa `v-if` per controllare se `unique` è vero o falso. Se true, significa che la lunghezza dell'oggetto restituito è 0 e l'e-mail può ancora essere utilizzata e viceversa. Allo stesso modo, puoi controllare se l'input dell'utente è un'e-mail reale usando `v-if`. E per tutti i div circostanti sul singolo input, aggiungeremo una classe di invalid che diventa attiva una volta che si verifica un errore su quell'input. Per associare gli eventi di validazione a ciascuno degli input nell'HTML, usiamo [`$touch()`](https://vuelidate.js.org/#sub-without-v-model) come visto con `email ` sotto. `Age`, `password` e `confirmPassword` saranno vincolati al loro input HTML in modo simile a `email`. E renderemo inattivo il pulsante "Invia" se si verifica un errore in uno qualsiasi degli input.

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

Ecco un [esempio CodePen] completo (https://codepen.io/atanda1/pen/Yzyqrjv) per questa sezione vuelidate.

## Autenticazione Questa app è una SPA e non si ricarica come i siti tradizionali, quindi useremo Vuex, come nostra unica "fonte di verità" per consentire a ogni componente della nostra app di essere a conoscenza dello stato di autenticazione generale. Andiamo al nostro file del negozio e creiamo entrambi i metodi di accesso/registrazione all'interno delle azioni. La risposta ("token" e "userId") ricevuta quando inviamo i dati degli utenti verrà archiviata nel nostro stato. Questo è importante perché il token verrà utilizzato per sapere se siamo ancora collegati o meno in qualsiasi momento all'interno della nostra app. Il `token`, `userId` e l'utente vengono creati nello stato con un valore iniziale nullo. Arriveremo all'utente molto più tardi, ma per ora ci concentreremo sui primi due.

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

Le mutazioni vengono quindi create per modificare lo stato quando necessario.

authUser	Salva il token e l' userId
storeUser	Memorizza le informazioni sull'utente
clearAuthData	Cancella i dati allo stato iniziale

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

Per la registrazione/accesso, dovremo creare singole azioni per entrambi, in cui inviamo le nostre richieste di autenticazione al server. Dopo di che la nostra risposta (token e userId) da registrazione/accesso viene impegnata in authUser e salvata nella memoria locale. Ma ecco la parte difficile, in particolare quello che faremo con l'azione di registrazione è inviare solo l'e-mail e la password per essere registrati nel database di autenticazione. Nel vero senso della parola, non abbiamo accesso per utilizzare i dati in questo database di autenticazione e non abbiamo inviato nessuno dei nostri dati di registrazione oltre a e-mail/password. Quindi quello che faremo è creare un'altra azione per inviare i dati di registrazione completi a un altro database. In questo documento di database separato, avremo accesso completo a tutte le informazioni che scegliamo di salvare lì. Chiameremo questa nuova azione chiamata `storeUser` Quindi andiamo alla nostra azione di registrazione e inviamo l'intero oggetto contenente i nostri dati di registrazione a un database a cui ora abbiamo accesso tramite `storeUser`. **Nota:** Potresti non voler inviare la password del tuo utente con `storeUser` al database per motivi di sicurezza. `storeUser` aggiunge una query utilizzando il nostro token appena ottenuto e l'API del database durante la pubblicazione nel database. Questo perché non possiamo scrivere nel nostro database, a meno che non siamo autenticati con la nostra prova (il token). Questa è la regola che abbiamo dato a Firebase all'inizio, ricordi?

 “write” = “auth” !== null

Il codice completo per le azioni di registrazione/accesso è proprio [qui](https://codepen.io/atanda1/pen/mdePKqj). Quindi invia sia la registrazione che l'accesso dai loro componenti all'interno del metodo `onSubmit` alle rispettive azioni nello store.

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

**Nota:** `signupData` contiene i dati del modulo. ## AuthGuard È necessario che AuthGuard impedisca agli utenti che non hanno effettuato l'accesso di accedere alla dashboard a cui invieranno il sondaggio. Vai al file di percorso e importa il nostro negozio.

 import store from './store'

All'interno del percorso, vai al percorso della dashboard e aggiungi quanto segue:

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

Tutto ciò non fa altro che verificare se c'è un token nello stato, se sì, diamo accesso alla dashboard e viceversa. ## LogOut Per creare la nostra opzione di logout useremo `clearAuth` che abbiamo creato in precedenza sotto `mutations` che imposta semplicemente `token` e `userId` su `null`. Ora creiamo una nuova `logout` `action` , che esegue il commit su `clearAuth`, elimina la memoria locale e aggiunge `router.replace('/')` per reindirizzare completamente l'utente.

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

Nel componente header, abbiamo un metodo `onLogout` che invia la nostra azione di logout nel negozio.

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

Quindi aggiungiamo un `@click` al pulsante che attiva il metodo `onLogout` come possiamo vedere [qui](https://codepen.io/atanda1/pen/jObqKNd).

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

## UI_State Ora che abbiamo concesso l'accesso condizionale alla dashboard, il passaggio successivo consiste nel rimuoverla dalla barra di navigazione, in modo che solo gli utenti autenticati possano visualizzarla. Per fare ciò, aggiungeremo un nuovo metodo sotto i `getters` chiamato `ifAuthenticated` che controlla se il token all'interno del nostro stato è nullo. Quando c'è un token, mostra che l'utente è autenticato e vogliamo che veda l'opzione dashboard del sondaggio sulla barra di navigazione.

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

Dopodiché, si torna al componente header e si crea un metodo `auth` under computated, che invia al nostro `isAuthenticated` all'interno dei `getter` che abbiamo appena creato nel negozio. Ciò che fa è che "isAuthenticated" restituirebbe false se non ci sono token, il che significa che anche "auth" sarebbe nullo e viceversa.

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

Dopo questo, aggiungiamo un `v-if` al nostro HTML per verificare se `auth` è nullo o meno, determinando se quell'opzione verrebbe mostrata sulla barra di navigazione.

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

- Troverai il codice completo della sezione UI State [qui](https://codepen.io/atanda1/pen/QWjNxyo).

Login automatico

Quando ricarichiamo la nostra app perdiamo i dati e veniamo disconnessi, dovendo ricominciare da capo. Questo perché il nostro token e Id sono archiviati in Vuex, che è javascript, e questo significa che la nostra app viene ricaricata con il browser quando viene aggiornata.

E quindi, infine, ciò che faremo è recuperare il token all'interno del nostro spazio di archiviazione locale. In questo modo, possiamo avere il token dell'utente sul browser indipendentemente da quando aggiorniamo la finestra e avere un metodo di accesso automatico al nostro utente finché il token è ancora valido.

Viene creato un nuovo metodo di actions chiamato AutoLogin , in cui otterremo il token e l' authUser userId mutazioni.

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

Quindi andiamo sul nostro App.vue e scriviamo un metodo created , che invierà l' autoLogin dal nostro negozio ogni volta che l'app viene caricata.

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

Recupera_dati_utente

Vogliamo dare il benvenuto all'utente sulla dashboard visualizzando il nome dell'utente. E così, viene creata un'altra azione chiamata fetchUser che prima controlla se c'è un token come al solito. Quindi, continua a ricevere l'e-mail dalla memoria locale e interroga il database come fatto in precedenza con la convalida dell'e-mail.

Questo restituisce un oggetto contenente i dati dell'utente inizialmente inviati durante la registrazione. Quindi convertiamo questo oggetto in un array e lo impegniamo nella mutazione storeUser creata inizialmente.

Dopo di che creiamo un altro getter chiamato user che restituisce state.user già impegnato tramite storeUser .

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

Tornando alla dashboard, creiamo un nuovo metodo calcolato chiamato name che restituisce state.user.name solo se l'utente esiste.

E aggiungeremo anche la proprietà calcolata created per inviare l'azione fetchUser una volta caricata la pagina. Usiamo quindi v-if nel nostro HTML per visualizzare il nome se il nome esiste.

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

Invia_Sondaggio

Per inviare il sondaggio, creeremo un'azione postData che invia i dati al database utilizzando l'API del database, con il token per mostrare al server che l'utente è connesso.

Torniamo al componente dashboard e inviamo i dati alla nostra azione postData nel negozio.

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

Ecco qua, abbiamo molte funzioni utili implementate nella nostra applicazione demo durante la comunicazione con il nostro server Firebase. Si spera che utilizzerai queste potenti funzionalità nel tuo prossimo progetto poiché sono molto fondamentali per la creazione di moderne app Web oggi.

Se avete domande, potete lasciarle nella sezione commenti e sarò felice di rispondere a ognuna di esse!

• La demo del tutorial è disponibile qui.

Altre risorse che potrebbero rivelarsi utili includono:

• Per saperne di più su Firebase e sugli altri servizi che offre, consulta l'articolo di Chris Esplin, "Cos'è Firebase?"
• Vuelidate è una libreria davvero carina in cui dovresti davvero scavare. Dovresti leggere la sua documentazione per ottenere una visione completa.https://vuelidate.js.org/.
• Puoi anche esplorare axios da solo, specialmente se vuoi usarlo in progetti più grandi.