Share
In het vorige deel van deze tutorialserie hebben we de Ladda-laadindicator toegevoegd aan onze applicatie om deze interactiever te maken. We hebben ook gezien hoe het gegevensresultaat moet worden gefilterd terwijl gegevens uit firebase worden opgehaald. In dit deel van de zelfstudie zullen we de uitlogfunctie toevoegen en een aantal problemen oplossen.
Laten we beginnen met het klonen van het vorige deel van de tutorial vanuit GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part7.git
Nadat u de broncode hebt gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.
cd AngularJS_Firebase_Part7 npm installeren
Zodra de afhankelijkheden zijn geïnstalleerd, start u de server.
npm start
Wijs je browser naar http: // localhost: 8000 / app / # / home en je zou de applicatie moeten laten draaien.
We beginnen met het toevoegen van de uitlogknop aan de addPost.html en welcome.html keer bekeken. Open beide pagina's en voeg een nieuw ankertag toe aan het nav-element.
Wanneer we een bepaalde gebruiker willen loggen, kunnen we de $ Onbevoegde firebase API. We zullen een methode maken in onze CommonProp AngularJS-service, zodat deze beschikbaar is voor alle controllers. Open home.js en wijzig de CommonProp service om een nieuwe functie op te nemen met de naam logoutUser.
logoutUser: function () // logout the user
Nu binnen de logoutUser functie, gebruik de loginObj om het te maken $ Onbevoegde API-oproep en omleiden naar de startpagina. Dit is het aangepaste CommonProp service.
Accentsconagua
.service ('CommonProp', ['$ location', '$ firebaseAuth', function ($ location, $ firebaseAuth) var user = "; var firebaseObj = nieuwe Firebase (" https: //blistering-heat-2473.firebaseio. com "); var loginObj = $ firebaseAuth (firebaseObj); return getUser: function () return user;, setUser: function (value) user = value;, logoutUser: function () loginObj. $ unauth ( ); console.log ('done logout'); $ location.path ('/ home');;])In de AddPostCtrl en WelcomeCtrl controllers, voeg een functie toe met de naam uitloggen die de uitlogvraag naar de CommonProp service.
$ scope.logout = function () CommonProp.logoutUser ();
Sla de bovenstaande wijzigingen op en log in met een geldig e-mailadres en wachtwoord. Nadat u bent ingelogd, zou u de Uitloggen link in het bovenste menu. Klik op de Uitloggen link moet u uitloggen van de applicatie.
Tot nu toe ziet alles er goed uit en werkt het goed. Maar nadat u zich bij de toepassing hebt aangemeld, als u de pagina probeert te verversen, raakt alles in de war. We moeten dus een manier vinden om de paginagegevens te behouden. We zullen gebruik maken van HTML 5 lokale opslag om belangrijke gegevens te ondersteunen.
Nadat de gebruiker zich heeft aangemeld, houden we het e-mailadres in de lokale opslag. Wijzig de setUser functie in de CommonProp dienst om het e-mailadres van de gebruiker op te slaan in lokale opslag.
setUser: function (value) localStorage.setItem ("userEmail", waarde); gebruiker = waarde; Nu, terwijl het e-mailadres van de gebruiker wordt opgehaald van de CommonProp service, haalt het e-mailadres uit de lokale opslag en komt het terug.
getUser: function () if (user == ") user = localStorage.getItem ('userEmail'); teruggebruiker;Zorg er ook voor dat u de lokale opslaggegevens en de gebruikersvariabele verwijdert uit de CommonProp dienst wanneer de gebruiker uitlogt.
logoutUser: function () loginObj. $ unauth (); user = "; localStorage.removeItem ('userEmail'); $ location.path ('/ home');Sla de bovenstaande wijzigingen op en log in met een geldig e-mailadres en wachtwoord. Probeer de pagina opnieuw in te stellen en de pagina werkt zoals verwacht.
Op dit moment hebben gebruikers toegang tot alle pagina's, ongeacht of ze zijn aangemeld of niet. Om ongeautoriseerde toegang te voorkomen, controleren we de gebruikerssessie.
In de WelcomeCtrl controller, voeg de volgende code toe om de huidige aangemelde gebruiker te krijgen. Als de gebruiker niet bestaat, stuurt u de gebruiker door naar de startpagina.
$ scope.username = CommonProp.getUser (); if (! $ scope.username) $ location.path ('/ home'); Voeg op dezelfde manier de volgende code toe aan de AddPostCtrl controleur.
if (! CommonProp.getUser ()) $ location.path ('/ home'); Sla de bovenstaande wijzigingen op en probeer de welkomstpagina of de pagina Bericht toevoegen te laden zonder u aan te melden en u moet worden omgeleid naar de inlogpagina.
We voegen nog een functie toe om automatisch in te loggen bij de gebruiker op de inlogpagina. We zullen gebruik maken van de $ onAuth API die luistert naar wijzigingen in de authenticatietoestand. Wanneer de gebruiker de inlogpagina laadt en een authenticatietoestand optreedt als gevolg van een geldige sessie, $ onAuth zal worden ontslagen. Voeg de toe $ onAuth API-oproep in de HomeCtrl controleur.
loginObj. $ onAuth (function (authData) // fire when authentication state happens);
Als het authData is niet leeg in de geretourneerde callback, dan is het een geldige sessie. Voeg dus de code toe om de gebruikersgegevens in de CommonProp-service op te slaan en door te sturen naar de welkomstpagina.
loginObj. $ onAuth (function (authData) if (authData) CommonProp.setUser (authData.password.email); $ location.path ('/ welcome'););Sla de bovenstaande wijzigingen op en log in bij de app. Na het inloggen sluit u de applicatie zonder uit te loggen. Probeer nu de aanmeldingspagina te laden en u moet automatisch zijn aangemeld bij de app.
In dit deel van de serie hebben we de uitlogfunctie geïmplementeerd en ook een aantal problemen opgelost, zoals het voorkomen van ongeautoriseerde gebruikerstoegang en het bijhouden van gegevens bij het vernieuwen van pagina's.
In de komende tutorials zal ik proberen een aantal functies te implementeren die door gebruikers zijn aangevraagd. Ik verwelkom alle functieverzoeken die je zou willen dat ik implementeer.
Pas op voor de komende tutorial door mijn instructeurspagina te controleren. Het bevat alle tutorials zodra ze zijn gepubliceerd.
Laat ons uw mening, suggesties en correcties weten in de opmerkingen hieronder. Broncode van deze tutorial is beschikbaar op GitHub.
