Share
Dans la partie précédente de cette série de didacticiels, nous avons ajouté l'indicateur de chargement Ladda dans notre application pour le rendre plus interactif. Nous avons également vu comment filtrer le résultat des données lors de l'extraction de données à partir de firebase. Dans cette partie du didacticiel, nous allons ajouter la fonctionnalité de déconnexion et résoudre quelques problèmes..
Commençons par cloner la partie précédente du tutoriel de GitHub.
clone de git https://github.com/jay3dec/AngularJS_Firebase_Part7.git
Après avoir cloné le code source, accédez au répertoire du projet et installez les dépendances requises..
cd AngularJS_Firebase_Part7 npm installer
Une fois les dépendances installées, démarrez le serveur.
npm start
Pointez votre navigateur sur http: // localhost: 8000 / app / # / home et vous devriez avoir l'application en cours d'exécution.
Nous allons commencer par ajouter le bouton de déconnexion à la addPost.html et bienvenue.html vues. Ouvrez les deux pages et ajoutez une nouvelle balise d'ancrage à l'élément nav.
Lorsque nous voulons déconnecter un utilisateur particulier, nous pouvons appeler le $ unauth API firebase. Nous allons créer une méthode dans notre CommonProp Service AngularJS afin qu’il soit disponible sur tous les contrôleurs. Ouvrir home.js et modifier le CommonProp service pour inclure une nouvelle fonction appelée logoutUser.
logoutUser: function () // déconnecter l'utilisateur
Maintenant dans le logoutUser fonction, utilisez le loginObj pour faire le $ unauth Appel API et redirection vers la page d'accueil. Voici le modifié CommonProp un service.
Accentsconagua
.service ('CommonProp', ['$ location', '$ firebaseAuth', fonction ($ location, $ firebaseAuth) var utilisateur = "; var firebaseObj = nouvelle Firebase (" https: //blistering-heat-2473.firebaseio. com "); var loginObj = $ firebaseAuth (firebaseObj); return getUser: function () utilisateur de retour;, setUser: fonction (valeur) utilisateur = valeur;, logoutUser: fonction () loginObj. $ unauth ( ); console.log ('done logout'); $ location.path ('/ home');;])dans le AddPostCtrl et BienvenueCtrl contrôleurs, ajoutez une fonction appelée Connectez - Out qui fera l'appel de déconnexion à la CommonProp un service.
$ scope.logout = function () CommonProp.logoutUser ();
Enregistrez les modifications ci-dessus et connectez-vous à l'aide d'une adresse e-mail et d'un mot de passe valides. Une fois connecté, vous devriez pouvoir voir le Connectez - Out lien dans le menu du haut. En cliquant sur le Connectez - Out lien devrait vous déconnecter de l'application.
Jusqu'à présent, tout va bien et fonctionne bien. Mais après vous être connecté à l'application, si vous essayez d'actualiser la page, tout est brouillé. Nous devons donc trouver un moyen de conserver les données de la page. Nous utiliserons le stockage local HTML 5 pour gérer les données importantes.
Une fois que l'utilisateur s'est connecté avec succès, nous conservons l'adresse électronique dans la mémoire de stockage locale. Modifier le setUser fonctionner dans le CommonProp service pour stocker l'adresse email de l'utilisateur dans le stockage local.
setUser: function (valeur) localStorage.setItem ("userEmail", valeur); utilisateur = valeur; Maintenant, tout en obtenant l'adresse électronique de l'utilisateur du CommonProp service, il va chercher l'adresse e-mail à partir de la mémoire locale et le retour.
getUser: function () if (utilisateur == ") utilisateur = localStorage.getItem ('userEmail'); utilisateur de retour;Veillez également à supprimer les données de stockage locales et la variable utilisateur du CommonProp service lorsque l'utilisateur se déconnecte.
logoutUser: function () loginObj. $ unauth (); user = "; localStorage.removeItem ('userEmail'); $ location.path ('/ home');Enregistrez les modifications ci-dessus et connectez-vous à l'aide d'une adresse e-mail et d'un mot de passe valides. Une fois connecté, essayez d'actualiser la page et la page devrait fonctionner comme prévu.
À l'heure actuelle, les utilisateurs peuvent accéder à toutes les pages, qu'ils soient connectés ou non. Afin de prévenir les accès non autorisés, nous allons vérifier la session de l'utilisateur.
dans le BienvenueCtrl contrôleur, ajoutez le code suivant pour obtenir l’utilisateur actuellement connecté. Si l'utilisateur n'existe pas, redirigez l'utilisateur vers la page d'accueil.
$ scope.username = CommonProp.getUser (); if (! $ scope.username) $ location.path ('/ home'); De même, ajoutez le code suivant en vérifiant le AddPostCtrl manette.
if (! CommonProp.getUser ()) $ location.path ('/ home'); Enregistrez les modifications ci-dessus et essayez de charger la page d'accueil ou la page Ajouter un message sans vous connecter. Vous devriez être redirigé vers la page de connexion..
Nous ajouterons une fonctionnalité supplémentaire pour vous connecter automatiquement à l'utilisateur sur la page de connexion. Nous allons utiliser le $ onAuth API qui écoute les modifications de l'état d'authentification. Lorsque l'utilisateur charge la page de connexion et qu'un état d'authentification se produit en raison d'une session valide, $ onAuth sera renvoyé. Ajouter le $ onAuth Appel API dans le HomeCtrl manette.
loginObj. $ onAuth (function (authData) // déclenche lorsque l'état d'authentification se produit);
Si la authData n'est pas null dans le rappel retourné, c'est une session valide. Alors, ajoutez le code pour enregistrer les détails de l'utilisateur dans le service CommonProp et rediriger vers la page d'accueil.
loginObj. $ onAuth (function (authData) if (authData) CommonProp.setUser (authData.password.email); $ location.path ('/ bienvenue'));Enregistrez les modifications ci-dessus et connectez-vous à l'application. Une fois connecté, fermez l'application sans vous déconnecter. Maintenant, essayez de charger la page de connexion et vous devriez être automatiquement connecté à l'application.
Dans cette partie de la série, nous avons implémenté la fonctionnalité de déconnexion et résolu certains problèmes tels que la prévention de l'accès des utilisateurs non autorisés et la conservation des données lors de l'actualisation de la page..
Dans les prochains tutoriels, je vais essayer d'implémenter quelques fonctionnalités demandées par les utilisateurs. J'accueille toutes les demandes de fonctionnalités que vous souhaitez que je mette en œuvre..
Surveillez le prochain tutoriel en consultant ma page d'instructeur. Il comprend tous les tutoriels dès leur publication.
Faites-nous savoir vos pensées, suggestions et corrections dans les commentaires ci-dessous. Le code source de ce tutoriel est disponible sur GitHub.
