Importez également [`axios`](https://github.com/axios/axios) pour pouvoir envoyer une requête HTTP au serveur :

 import axios from 'axios'

Avant de continuer, nous devrons ajouter quelques règles à la base de données pour pouvoir valider l'e-mail comme il se doit, comme indiqué ci-dessous :

 "read" = "true"

Cela signifie que la base de données peut être lue sans aucune entrave du côté client.

 "write" = "auth" !== null

Vous ne pouvez pas écrire sur la base de données sauf si vous êtes un utilisateur authentifié.

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

Cela nous permet d'interroger le document `users` avec un index de `email`. Autrement dit, vous pouvez littéralement filtrer la base de données pour un e-mail unique. Ajoutez ensuite une propriété calculée personnalisée avec le nom `validations` tout comme nous avons des méthodes, des calculs, etc. Sous `validations` nous aurons des méthodes pour valider les données nécessaires à partir de `email` où elles sont requises et doivent évidemment être un e-mail . De plus, nous voulons être en mesure d'informer un utilisateur lorsqu'un e-mail a déjà été pris par quelqu'un d'autre, en vérifiant la base de données après que l'utilisateur l'a tapé à l'aide de quelque chose appelé validateurs asynchrones, le tout dans un validateur personnalisé et tout est pris en charge par [vuelidate. ](https://vuelidate.js.org/#sub-asynchronous-validation) Ensuite, sous unique, interrogez la base de données à l'aide d'axios et utilisez les Object.keys par défaut pour renvoyer la réponse uniquement si sa longueur est de 0. Pour l'âge, vous ajouterez obligatoire, numérique et une valeur minimale de 18 attribuée à `minVal ` comme ses propriétés.

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

Les propriétés du mot de passe sont obligatoires, avec une longueur minimale de 6 attribuées à `minLen`.

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

Les propriétés `confirmPassword` doivent être identiques au mot de passe.

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

Pour dire à l'utilisateur que l'e-mail est pris, utilisez `v-if` pour vérifier si `unique` est vrai ou faux. Si vrai, cela signifie que la longueur de l'objet renvoyé est de 0 et que le courrier électronique peut toujours être utilisé et vice versa. De la même manière, vous pouvez vérifier si l'entrée de l'utilisateur est un e-mail réel en utilisant `v-if`. Et pour toutes les divs environnantes sur l'entrée individuelle, nous ajouterons une classe invalide qui devient active une fois qu'il y a une erreur sur cette entrée. Pour lier les événements de validation à chacune des entrées dans le HTML, nous utilisons [`$touch()`](https://vuelidate.js.org/#sub-without-v-model) comme on le voit avec le `email ` ci-dessous. `Age`, `password` et `confirmPassword` seront liés à leur entrée HTML de la même manière que `email`. Et nous rendrons le bouton "Soumettre" inactif s'il y a une erreur dans l'une des entrées.

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

Voici un [exemple CodePen] complet (https://codepen.io/atanda1/pen/Yzyqrjv) pour cette section vuelidate.

## Authentification Cette application est un SPA et ne se recharge pas comme les sites traditionnels. Nous utiliserons donc Vuex comme notre unique "source de vérité" pour permettre à chaque composant de notre application de connaître l'état général de l'authentification. Nous allons dans notre fichier de magasin et créons les deux méthodes de connexion/inscription dans les actions. La réponse (`token` et `userId`) reçue lorsque nous envoyons les données des utilisateurs, va être stockée dans notre état. Ceci est important car le jeton sera utilisé pour savoir si nous sommes toujours connectés ou non à tout moment dans notre application. Le `token`, `userId` et l'utilisateur sont créés dans l'état avec une valeur initiale de null. Nous aborderons l'utilisateur beaucoup plus tard, mais pour l'instant, nous nous concentrerons sur les deux premiers.

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

Des mutations sont ensuite créées pour changer l'état en cas de besoin.

authUser	Enregistre le jeton et l' userId
storeUser	Stocke les informations de l'utilisateur
clearAuthData	Efface les données à l'état initial

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

Pour l'inscription/la connexion, nous devrons créer des actions individuelles pour les deux, où nous enverrons nos demandes d'authentification au serveur. Après quoi, notre réponse (token et userId) de l'inscription/de la connexion est validée pour authUser et enregistrée sur le stockage local. Mais voici la partie délicate, ce que nous ferons avec l'action d'inscription en particulier est d'envoyer uniquement l'e-mail et le mot de passe à enregistrer dans la base de données d'authentification. Dans la réalité, nous n'avons pas accès aux données de cette base de données d'authentification et nous n'avons envoyé aucune de nos données d'inscription à part l'e-mail/le mot de passe. Nous allons donc créer une autre action pour envoyer les données d'inscription complètes à une autre base de données. Dans ce document de base de données séparé, nous aurons un accès complet à toutes les informations que nous choisissons d'y enregistrer. Nous appellerons cette nouvelle action `storeUser`. Nous allons ensuite à notre action d'inscription et envoyons l'objet entier contenant nos données d'inscription à une base de données à laquelle nous avons maintenant accès via `storeUser`. **Remarque :** Vous ne souhaitez peut-être pas envoyer le mot de passe de votre utilisateur avec `storeUser` à la base de données pour des raisons de sécurité. `storeUser` ajoute une requête à l'aide de notre API de jeton et de base de données nouvellement obtenue lors de la publication dans la base de données. C'est parce que nous ne pouvons pas écrire dans notre base de données, sauf que nous sommes authentifiés avec notre preuve (le jeton). C'est la règle que nous avons donnée à Firebase au début, vous vous souvenez ?

 “write” = “auth” !== null

Le code complet pour les actions d'inscription/de connexion se trouve juste [ici](https://codepen.io/atanda1/pen/mdePKqj). Envoyez ensuite l'inscription et la connexion à partir de leurs composants dans la méthode "onSubmit" aux actions respectives dans le magasin.

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

**Remarque :** `signupData` contient les données du formulaire. ## AuthGuard Il est nécessaire qu'AuthGuard empêche les utilisateurs non connectés d'accéder au tableau de bord où ils enverront l'enquête. Accédez au fichier de route et importez notre magasin.

 import store from './store'

Dans la route, accédez au chemin du tableau de bord et ajoutez ce qui suit :

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

Tout cela ne fait que vérifier s'il y a un jeton dans l'état, si oui, nous donnons accès au tableau de bord et vice versa. ## LogOut Pour créer notre option de déconnexion, nous utiliserons `clearAuth` que nous avons créé précédemment sous `mutations` qui définit simplement le `token` et `userId` sur `null`. Nous créons maintenant une nouvelle `action` `logout`, qui s'engage sur `clearAuth`, supprime le stockage local et ajoute `router.replace('/')` pour rediriger complètement l'utilisateur.

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

Dans le composant d'en-tête, nous avons une méthode "onLogout" qui distribue notre action de déconnexion dans le magasin.

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

Nous ajoutons ensuite un `@click` au bouton qui déclenche la méthode `onLogout` comme nous pouvons le voir [ici](https://codepen.io/atanda1/pen/jObqKNd).

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

## UI_State Maintenant que nous avons accordé un accès conditionnel au tableau de bord, l'étape suivante consiste à le supprimer de la barre de navigation, afin que seuls les utilisateurs authentifiés puissent le voir. Pour ce faire, nous ajouterions une nouvelle méthode sous les `getters` appelée `ifAuthenticated` qui vérifie si le jeton dans notre état est nul. Lorsqu'il y a un jeton, cela montre que l'utilisateur est authentifié et nous voulons qu'il voie l'option de tableau de bord d'enquête sur la barre de navigation.

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

Après quoi, vous revenez au composant d'en-tête et créez une méthode `auth` sous computed, qui envoie à notre `isAuthenticated` dans les `getters` que nous venons de créer dans le magasin. Cela signifie que `isAuthenticated` renverrait false s'il n'y avait pas de jeton, ce qui signifie que `auth` serait également nul et vice versa.

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

Après cela, nous ajoutons un `v-if` à notre HTML pour vérifier si `auth` est nul ou non, déterminant si cette option s'affichera sur la barre de navigation.

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

- Vous trouverez le code complet de la section UI State [ici](https://codepen.io/atanda1/pen/QWjNxyo).

Connexion automatique

Lorsque nous rechargeons notre application, nous perdons les données et sommes déconnectés, devant tout recommencer. En effet, notre jeton et notre identifiant sont stockés dans Vuex, qui est en javascript, ce qui signifie que notre application est rechargée avec le navigateur lors de l'actualisation.

Et donc finalement, ce que nous allons faire est de récupérer le jeton dans notre stockage local. Ce faisant, nous pouvons avoir le jeton de l'utilisateur sur le navigateur, quel que soit le moment où nous actualisons la fenêtre, et disposer d'une méthode de connexion automatique de notre utilisateur tant que le jeton est toujours valide.

Une nouvelle méthode d' actions appelée AutoLogin est créée, où nous obtiendrons le jeton et l' userId utilisateur du stockage local, et engagerons nos données dans la méthode authUser dans les mutations.

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

Nous allons ensuite dans notre App.vue et écrivons une méthode created , qui enverra l' autoLogin de notre magasin à chaque chargement de l'application.

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

Récupérer_données_utilisateur

Nous voulons souhaiter la bienvenue à l'utilisateur sur le tableau de bord en affichant le nom de l'utilisateur. Et ainsi, une autre action appelée fetchUser est créée qui vérifie d'abord s'il y a un jeton comme d'habitude. Ensuite, il récupère l'e-mail à partir du stockage local et interroge la base de données comme précédemment avec la validation de l'e-mail.

Cela renvoie un objet contenant les données de l'utilisateur initialement soumises lors de l'inscription. Nous convertissons ensuite cet objet en tableau et le commitons dans la mutation storeUser initialement créée.

Après quoi, nous créons un autre getter appelé user qui renvoie le state.user déjà validé via storeUser .

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

De retour au tableau de bord, nous créons une nouvelle méthode calculée appelée name qui renvoie state.user.name uniquement si l'utilisateur existe.

Et nous ajouterons également la propriété calculée created pour envoyer l'action fetchUser une fois la page chargée. Nous utilisons ensuite le v-if dans notre HTML afin d'afficher le nom si le nom existe.

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

Send_Survey

Pour envoyer l'enquête, nous allons créer une action postData qui envoie les données à la base de données à l'aide de l'API de base de données, avec le jeton pour montrer au serveur que l'utilisateur est connecté.

Nous revenons au composant de tableau de bord et envoyons les données à notre action postData dans le magasin.

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

Voilà, nous avons beaucoup de fonctionnalités utiles implémentées dans notre application de démonstration tout en communiquant avec notre serveur Firebase. J'espère que vous utiliserez ces fonctionnalités puissantes dans votre prochain projet, car elles sont très essentielles à la création d'applications Web modernes aujourd'hui.

Si vous avez des questions, vous pouvez les laisser dans la section des commentaires et je serai heureux de répondre à chacune d'entre elles !

• La démo du tutoriel est en direct ici.

D'autres ressources qui peuvent s'avérer utiles comprennent :

• Pour en savoir plus sur Firebase et les autres services qu'il propose, consultez l'article de Chris Esplin, "Qu'est-ce que Firebase ?"
• Vuelidate est une très belle bibliothèque dans laquelle vous devriez vraiment creuser. Vous devriez lire sa documentation pour en avoir un aperçu complet.https://vuelidate.js.org/.
• Vous pouvez également explorer axios seul, surtout si vous souhaitez l'utiliser dans des projets plus importants.