Share
În partea anterioară a acestei serii tutorial, am adăugat indicatorul de încărcare Ladda în aplicația noastră pentru a deveni mai interactiv. De asemenea, am văzut cum să filtram rezultatul datelor în timp ce preluăm datele din firebase. În această parte a tutorialului, vom adăuga funcționalitatea de deconectare și vom remedia câteva probleme.
Să începem prin clonarea părții anterioare a tutorialului de la GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part7.git
După ce ați clonat codul sursă, navigați la directorul proiectului și instalați dependențele necesare.
cd AngularJS_Firebase_Part7 instalare npm
După instalarea dependențelor, porniți serverul.
npm start
Punctați browser-ul la http: // localhost: 8000 / app / # / home și ar trebui să aveți aplicația să ruleze.
Vom începe prin adăugarea butonului de deconectare la addPost.html și welcome.html vizionări. Deschideți ambele pagini și adăugați o nouă etichetă de ancorare elementului nav.
Când vrem să conectăm un anumit utilizator, putem apela $ UNAUTH firebase API. Vom crea o metodă în nostru CommonProp Serviciul AngularJS, astfel încât să fie disponibil pentru controlori. Deschis home.js și modificați CommonProp serviciu pentru a include o nouă funcție numită logoutUser.
logoutUser: funcția () // logout the user
Acum înăuntru logoutUser funcția, utilizați loginObj pentru a face $ UNAUTH Apelul API și redirecționarea către pagina de pornire. Aici este modificat CommonProp serviciu.
Accentsconagua
.('$ locationbase', '$ firebaseAuth', funcția ($ location, $ firebaseAuth) var user = "; var firebaseObj = noua Firebase (" https: //blistering-heat-2473.firebaseio. com "); var loginObj = $ firebaseAuth (firebaseObj); returnează getUser: function () return utilizator; setUser: ); console.log ('done logout'); $ location.path ('/ home');;])În AddPostCtrl și WelcomeCtrl controlere, adăugați o funcție numită logout care va face apelul de logout la CommonProp serviciu.
$ scope.logout = funcția () CommonProp.logoutUser ();
Salvați modificările de mai sus și conectați-vă utilizând o adresă de e-mail și o parolă valide. După ce v-ați conectat, ar trebui să vedeți Deconectare link în meniul de sus. Dând clic pe Deconectare link-ul ar trebui să vă deconecteze din aplicație.
Până acum, totul arată bine și funcționează bine. Dar după ce v-ați conectat la aplicație, dacă încercați să reîmprospătați pagina, totul se încurcă. Deci, trebuie să găsim o modalitate de a menține datele paginii. Vom folosi depozitul local HTML5 pentru a susține date importante.
După ce utilizatorul sa conectat cu succes, vom păstra adresa de e-mail în spațiul de stocare local. Modificați setUser funcția în CommonProp serviciu pentru a stoca adresa de e-mail a utilizatorului în spațiul de stocare local.
setUser: funcție (valoare) localStorage.setItem ("userEmail", valoare); user = valoare; Acum, în timp ce obțineți adresa de e-mail de la utilizator CommonProp serviciu, va prelua adresa de e-mail de la spațiul de stocare local și retur.
getUser: funcția () if (user == ") user = localStorage.getItem ('userEmail'); return utilizator;De asemenea, asigurați-vă că eliminați datele de stocare locale și variabila de utilizator de la CommonProp atunci când utilizatorul se deconectează.
logoutUser: funcție () loginObj. $ unauth (); user = "; localStorage.removeItem ('userEmail'); $ location.path ('/ home');Salvați modificările de mai sus și conectați-vă utilizând o adresă de e-mail și o parolă valide. După ce v-ați conectat, încercați să actualizați pagina și pagina ar trebui să funcționeze conform așteptărilor.
În prezent, utilizatorii pot accesa toate paginile, indiferent dacă sunt conectați sau nu. Pentru a preveni accesul neautorizat, vom verifica sesiunea de utilizatori.
În WelcomeCtrl controler, adăugați următorul cod pentru a obține utilizatorul curent conectat. Dacă utilizatorul nu există, atunci redirecționați utilizatorul la pagina de pornire.
$ scope.username = CommonProp.getUser (); dacă (! $ scope.username) $ loc.path ('/ home'); În mod similar, adăugați următoarea verificare a codului la AddPostCtrl controlor.
dacă ! CommonProp.getUser ()) $ location.path ('/ home'); Salvați modificările de mai sus și încercați să încărcați pagina de întâmpinare sau pagina Adăugare post fără a vă conecta și ar trebui să fiți redirecționat (ă) la pagina de conectare.
Vom adăuga o altă funcție pentru a vă conecta automat la utilizator când vă aflați pe pagina de conectare. Vom face uz de $ onAuth API care va asculta schimbări în starea de autentificare. Când utilizatorul încarcă pagina de conectare și apare o stare de autentificare din cauza unei sesiuni valide, $ onAuth va fi concediat. Adaugă $ onAuth API apel în HomeCtrl controlor.
loginObj $ onAuth (funcție (authData) // incendiu atunci când se produce starea de autentificare);
În cazul în care authData nu este null în callback-ul returnat, atunci este o sesiune validă. Deci, adăugați codul pentru a salva detaliile utilizatorului în serviciul CommonProp și pentru a redirecționa pagina de întâmpinare.
loginObj $ onAuth (funcția (authData) if (authData) CommonProp.setUser (authData.password.email); $ location.path ('/ welcome'););Salvați modificările de mai sus și conectați-vă la aplicație. După ce v-ați conectat, închideți aplicația fără să vă deconectați. Acum, încercați să încărcați pagina de conectare și ar trebui să vă conectați automat la aplicație.
În această parte a seriei, am implementat funcționalitatea logoutului și, de asemenea, am rezolvat câteva dintre aspecte, cum ar fi împiedicarea accesului neautorizat al utilizatorilor și menținerea datelor privind actualizarea paginilor.
În următoarele tutoriale, voi încerca să pun în aplicare câteva funcții solicitate de utilizatori. Salut toate solicitările pe care doriți să le implementați.
Ferește-te pentru tutorialul următor, verificând pagina instructorului meu. Acesta include toate tutorialele de îndată ce sunt publicate.
Spuneți-ne gândurile, sugestiile și corecțiile din comentariile de mai jos. Codul sursă din acest tutorial este disponibil pe GitHub.
