Share
I den forrige delen av denne opplæringsserien la vi lasteindikatoren til vår applikasjon for å gjøre den mer interaktiv. Vi så også hvordan du filtrerer dataresultatet mens du henter data fra brannbase. I denne delen av opplæringen legger vi til loggfunksjonaliteten og løser et par problemer.
La oss begynne med å klone den forrige delen av opplæringen fra GitHub.
git klon https://github.com/jay3dec/AngularJS_Firebase_Part7.git
Etter kloning av kildekoden, naviger til prosjektkatalogen og installer de nødvendige avhengighetene.
cd AngularJS_Firebase_Part7 npm installere
Når avhengighetene er installert, start serveren.
npm start
Pek nettleseren din til http: // localhost: 8000 / app / # / home, og du bør ha programmet kjørt.
Vi starter med å legge til logout-knappen til addPost.html og velkommen.html utsikt. Åpne begge sidene og legg til en ny ankermerke til nav-elementet.
Når vi ønsker å logge en bestemt bruker ut, kan vi ringe til $ UNAUTH firebase API. Vi lager en metode i vår CommonProp AngularJS-tjenesten slik at den er tilgjengelig på tvers av kontrollerne. Åpen home.js og endre CommonProp tjeneste for å inkludere en ny funksjon som kalles logoutUser.
logoutUser: funksjon () // logg ut brukeren
Nå inne i logoutUser funksjon, bruk loginObj å gjøre $ UNAUTH API-anrop og omdirigere til hjemmesiden. Her er den endrede CommonProp service.
Accentsconagua
.tjeneste ('CommonProp', ['$ location', '$ firebaseAuth', funksjon ($ plassering, $ firebaseAuth) var user = "; var firebaseObj = new Firebase (" https: //blistering-heat-2473.firebaseio. com)); var loginObj = $ firebaseAuth (firebaseObj); return getUser: function () retur bruker;, setUser: funksjon (verdi) user = value;, logoutUser: function () loginObj. $ unauth ); console.log ('ferdig logout'); $ location.path ('/ home');;])I AddPostCtrl og WelcomeCtrl kontrollere, legg til en funksjon som kalles Logg ut som vil gjøre logout-anropet til CommonProp service.
$ scope.logout = funksjon () CommonProp.logoutUser ();
Lagre endringene ovenfor og logg inn med en gyldig e-postadresse og passord. Når du er logget på, bør du kunne se Logg ut lenke i toppmenyen. Klikk på Logg ut lenke skal logge deg ut av programmet.
Til nå ser alt bra ut og fungerer bra. Men etter at du har logget på programmet, blir du oppgradert hvis du prøver å oppdatere siden. Så, vi må finne en måte å opprettholde sidedataene på. Vi skal bruke HTML 5 lokal lagring for å opprettholde viktige data.
Når brukeren har logget på, vil vi beholde e-postadressen i lokal lagring. Endre setUser fungere i CommonProp tjeneste for å lagre brukerens e-postadresse i lokal lagring.
setUser: funksjon (verdi) localStorage.setItem ("userEmail", verdi); bruker = verdi; Nå, mens du får brukerens e-postadresse fra CommonProp tjenesten, vil den hente e-postadressen fra lokal lagring og returnere.
getUser: function () if (user == ") user = localStorage.getItem ('userEmail'); retur bruker;Pass også på å fjerne lokale lagringsdata og brukervariabelen fra CommonProp service når brukeren logger ut.
logoutBruger: funksjon () loginObj. $ unauth (); user = "; localStorage.removeItem ('userEmail'); $ location.path ('/ home');Lagre endringene ovenfor og logg inn med en gyldig e-postadresse og passord. Når du er logget på, prøv å oppdatere siden, og siden skal fungere som forventet.
Nå kan brukere få tilgang til alle sidene, uavhengig av om de er logget inn eller ikke. For å forhindre uautorisert tilgang kontrollerer vi etter brukersesjon.
I WelcomeCtrl kontroller, legg til følgende kode for å få den nåværende innloggede brukeren. Hvis brukeren ikke eksisterer, omdirigerer brukeren til startsiden.
$ scope.username = CommonProp.getUser (); hvis (! $ scope.username) $ location.path ('/ home'); Tilsvarende legg til følgende kodekontroll til AddPostCtrl kontrolleren.
hvis (! CommonProp.getUser ()) $ location.path ('/ home'); Lagre endringene ovenfor, og prøv å laste velkomstsiden eller siden Legg til innlegg uten å logge inn, og du bør omdirigeres til påloggingssiden.
Vi legger til en ekstra funksjon for å logge automatisk på brukeren når du er på påloggingssiden. Vi vil gjøre bruk av $ onAuth API som vil lytte etter endringer i autentiseringsstatus. Når brukeren laster innloggingssiden, og det oppstår en godkjenningsstatus på grunn av en gyldig økt, $ onAuth vil bli sparket. Legg til $ onAuth API-anrop i HomeCtrl kontrolleren.
loginObj. $ onAuth (funksjon (authData) // brann når autentiseringsstatus oppstår);
Hvis authData er ikke null i den returnerte tilbakeringingen, så er det en gyldig økt. Så legg til koden for å lagre brukerdetaljer i CommonProp-tjenesten og omdirigere til velkomstsiden.
loginObj. $ onAuth (funksjon (authData) if (authData) CommonProp.setUser (authData.password.email); $ location.path ('/ welcome'););Lagre endringene ovenfor og logg inn på programmet. Når du er logget på, lukk programmet uten å logge ut. Prøv nå å laste inn påloggingssiden, og du bør automatisk logges inn i programmet.
I denne delen av serien implementerte vi loggingsfunksjonaliteten og sorterte også ut noen av problemene som å forhindre uautorisert brukertilgang og vedlikeholde data på sideoppdatering.
I de kommende opplæringsprogrammene vil jeg prøve å implementere noen få funksjoner som forespurt av brukere. Jeg ønsker velkommen alle funksjonsforespørsler som du vil at jeg skal implementere.
Se opp for den kommende opplæringen ved å sjekke min instruktørside. Den inneholder alle opplæringsprogrammer så snart de er publisert.
Gi oss beskjed om dine tanker, forslag og rettelser i kommentarene nedenfor. Kildekode fra denne opplæringen er tilgjengelig på GitHub.
