Ovo je blog post o temi o kojoj se puno ne govori, ali koja se podrazumijeva za gotovo sve Ionic aplikacije koje sadržavaju ekran za prijavu.
Kada imate svoj API za prijavu ovo je jedan od načina kako korisnicima omogućiti automatsku prijavu u aplikaciju bez potrebe da svaki put prilikom pokretanja unose korisničko ime i lozinku. Znači, korisničko ime i lozinku trebaju upisati samo prvi put.
U nastavku možete vidjeti kako korisnicima omogućiti da ostanu prijavljeni u aplikaciju i nakon što se aplikacija zatvori.
Pretpostavka
Imate Ionic aplikaciju s ekranom za prijavu. Korisnik pokrene aplikaciju, pojavi se ekran za prijavu, korisnik unese korisničko ime i lozinku i nakon klika na gumb, pod uvjetom da je unio točne podatke, pojavi mu se početni ekran Ionic aplikacije.
Nakon nekog vremena korisnik ugasi aplikaciju i odloži mobilni uređaj. Kasnije ponovno želi pokrenuti Ionic aplikaciju i ponovno mora unositi korisničko ime i lozinku i tako svaki put.
Ako pretpostavimo da samo jedan korisnik koristi taj mobilni uređaj jasno je da takav način korištenja aplikacije nije najsretnije rješenje i da tom korisniku treba omogućiti jednostavniji i brži način prijave u aplikaciju tj. omogućiti korisniku da ostane prijavljen sve dok se sam ne odluči odjaviti.
localStorage kao rješenje
To ćemo postići koristeći localStorage.
Spremanje
Nakon što je korisnik uspješno prijavljen res.status == 'ok' spremit ćemo podatak o njegovom korisničkom imenu localStorage.setItem('username', res.username); u localStorage.
Znači taj se podatak sprema isključivo u slučaju kada je korisnik uspješno prijavljen i zato se možemo pouzdati u njega.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
login(username,password){ this.user.username = username; this.user.password = password; this._api.userLogin(this.user).subscribe(res => { if(res.status == 'ok'){ //Spremanje podataka lokalno nakon uspješne prijave localStorage.setItem('username', res.username); this._navCtrl.setRoot(Dashboard); } else { this.loginFailed(); } }); } |
Korištenje
Prilikom svakog sljedećeg pokretanja aplikacije vršit će se provjera postoji li podatak o korisničkom imenu u lokalnoj memoriji localStorage.getItem('username') i pod uvjetom da postoji automatski se ulazi u aplikaciju i prikazuje početna stranica.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
initializeApp() { this._platform.ready().then(() => { //Ostani prijavljen if (localStorage.getItem('username')) { this.nav.push(Dashboard); this.nav.setRoot(Dashboard); } else { // } // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. this._statusBar.styleDefault(); this._splashScreen.hide(); }); } |
Brisanje
U slučaju da više korisnika koristi jedan mobilni uređaj omogućit ćemo brisanje podatka iz lokalne memorije prilikom odjave. Na taj se način nekom drugom korisniku omogućava da se samostalno prijavu u aplikaciju i ostane prijavljen sve dok se i on ne odluči odjaviti.
1 2 3 4 |
logout(){ localStorage.clear(); this.nav.setRoot(Login); } |