Creazione di un'app Web da zero utilizzando AngularJS e Firebase parte 8

Nella parte precedente di questa serie di tutorial, abbiamo aggiunto l'indicatore di caricamento Ladda nella nostra applicazione per renderlo più interattivo. Abbiamo anche visto come filtrare il risultato dei dati durante il recupero dei dati da Firebase. In questa parte del tutorial, aggiungeremo la funzionalità di disconnessione e risolveremo un paio di problemi.

Iniziare

Iniziamo clonando la parte precedente del tutorial da GitHub.

git clone https://github.com/jay3dec/AngularJS_Firebase_Part7.git

Dopo la clonazione del codice sorgente, accedere alla directory del progetto e installare le dipendenze richieste.

cd AngularJS_Firebase_Part7 npm install

Una volta installate le dipendenze, avviare il server.

inizio di npm

Puntare il browser su http: // localhost: 8000 / app / # / home e si dovrebbe avere l'applicazione in esecuzione.

Implementazione della funzionalità di disconnessione

Aggiunta del pulsante di disconnessione

Inizieremo aggiungendo il pulsante di disconnessione a addPost.html e welcome.html visualizzazioni. Apri entrambe le pagine e aggiungi un nuovo tag di ancoraggio all'elemento nav. 

Esecuzione del logout

Quando vogliamo registrare un particolare utente, possiamo chiamare il $ unauth API firebase. Creeremo un metodo nel nostro CommonProp Servizio AngularJS in modo che sia disponibile su tutti i controller. Aperto home.js e modificare il CommonProp servizio per includere una nuova funzione chiamata logoutUser.

logoutUser: function () // disconnetti l'utente

Ora dentro il logoutUser funzione, utilizzare il loginObj fare il $ unauth Chiamata API e reindirizzamento alla home page. Ecco la modifica CommonProp servizio.

.service ('CommonProp', ['$ location', '$ firebaseAuth', function ($ location, $ firebaseAuth) var user = "; var firebaseObj = new Firebase (" https: //blistering-heat-2473.firebaseio. com "); var loginObj = $ firebaseAuth (firebaseObj); return getUser: function () return user;, setUser: function (valore) user = value;, logoutUser: function () loginObj. $ unauth ( console.log ('done logout'); $ location.path ('/ home');;])

Nel AddPostCtrl e WelcomeCtrl controller, aggiungere una funzione chiamata disconnettersi che farà la chiamata di logout al CommonProp servizio.

$ scope.logout = function () CommonProp.logoutUser (); 

Salvare le modifiche precedenti e accedere utilizzando un indirizzo email e una password validi. Una volta effettuato l'accesso, dovresti essere in grado di visualizzare il Disconnettersi link nel menu in alto. Cliccando sul Disconnettersi link dovrebbe disconnetterti dall'applicazione.

Manutenzione dei dati della pagina all'aggiornamento

Fino ad ora tutto sembra a posto e funziona bene. Ma dopo aver effettuato l'accesso all'applicazione, se si tenta di aggiornare la pagina, tutto diventa incasinato. Quindi, dobbiamo trovare un modo per mantenere i dati della pagina. Useremo l'archiviazione locale di HTML 5 per sostenere dati importanti. 

Una volta effettuato l'accesso, l'utente manterrà l'indirizzo e-mail nella memoria locale. Modifica il setuser funzione nel CommonProp servizio per memorizzare l'indirizzo e-mail dell'utente nella memoria locale.

setUser: function (value) localStorage.setItem ("userEmail", valore); utente = valore; 

Ora, mentre ricevo l'indirizzo email dell'utente dal CommonProp servizio, recupererà l'indirizzo e-mail dalla memoria locale e restituirà.

getUser: function () if (user == ") user = localStorage.getItem ('userEmail'); return user;

Assicurati inoltre di rimuovere i dati di archiviazione locale e la variabile utente da CommonProp servizio quando l'utente si disconnette.

logoutUser: function () loginObj. $ unauth (); user = "; localStorage.removeItem ('userEmail'); $ location.path ('/ home');

Salvare le modifiche precedenti e accedere utilizzando un indirizzo email e una password validi. Una volta effettuato l'accesso, prova ad aggiornare la pagina e la pagina dovrebbe funzionare come previsto.

Impedire l'accesso alle pagine non autorizzate

In questo momento gli utenti sono in grado di accedere a tutte le pagine, indipendentemente dal fatto che siano o meno loggati. Per impedire l'accesso non autorizzato, controlleremo la sessione dell'utente.

Nel WelcomeCtrl controller, aggiungere il codice seguente per ottenere l'utente attualmente connesso. Se l'utente non esiste, reindirizza l'utente alla pagina iniziale.

$ scope.username = CommonProp.getUser (); if (! $ scope.username) $ location.path ('/ home'); 

Allo stesso modo aggiungere il seguente codice di controllo al AddPostCtrl controllore.

if (! CommonProp.getUser ()) $ location.path ('/ home'); 

Salvare le modifiche precedenti e provare a caricare la pagina di benvenuto o la pagina Aggiungi post senza effettuare l'accesso e si dovrebbe essere reindirizzati alla pagina di accesso. 

Accesso automatico utente su sessione valida

Aggiungeremo un'altra funzionalità per l'accesso automatico all'utente nella pagina di accesso. Useremo il $ onAuth API che ascolterà i cambiamenti nello stato di autenticazione. Quando l'utente carica la pagina di accesso e si verifica uno stato di autenticazione a causa di una sessione valida, $ onAuth sarà licenziato. Aggiungi il $ onAuth Chiamata API in HomeCtrl controllore.

loginObj. $ onAuth (funzione (authData) // incendio quando si verifica lo stato di autenticazione);

Se la AuthData non è nullo nel callback restituito, quindi è una sessione valida. Quindi, aggiungi il codice per salvare i dettagli dell'utente nel servizio CommonProp e reindirizza alla pagina di benvenuto.

loginObj. $ onAuth (function (authData) if (authData) CommonProp.setUser (authData.password.email); $ location.path ('/ welcome'););

Salvare le modifiche precedenti e accedere all'applicazione. Una volta effettuato l'accesso, chiudere l'applicazione senza disconnettersi. Ora prova a caricare la pagina di accesso e devi accedere automaticamente all'applicazione.

Avvolgendolo

In questa parte della serie, abbiamo implementato la funzionalità di disconnessione e anche risolto alcuni dei problemi come impedire l'accesso non autorizzato degli utenti e il mantenimento dei dati sull'aggiornamento della pagina. 

Nei prossimi tutorial, cercherò di implementare alcune funzionalità richieste dagli utenti. Accolgo con favore qualsiasi richiesta di funzionalità che vorresti implementare.

Fai attenzione al prossimo tutorial controllando la mia pagina di istruttore. Include tutti i tutorial non appena vengono pubblicati.

Fateci sapere i vostri pensieri, suggerimenti e correzioni nei commenti qui sotto. Il codice sorgente di questo tutorial è disponibile su GitHub.