Ionic storage problem to store user credentials


#1

I have problem with storing token with user credentials when i refresh browser or mobile application it gives login page every time without pressing log out button. its not store token in local storage so how to keep user logged in.

Here is code what i have wrote

import { Injectable } from ‘@angular/core’;
import { Http,Headers} from ‘@angular/http’;
//import {Observable} from ‘rxjs/Rx’;
import { Storage } from ‘@ionic/storage’;
import ‘rxjs/add/operator/map’;
import ‘rxjs/add/operator/catch’;

@Injectable()
export class Authservice {

public token: any;

constructor(public http: Http,public storage:Storage) {}

loginuser(name,Kennwort){
return new Promise((resolve, reject) => {
let headers = new Headers();
headers.append(‘Content-Type’, ‘application/json’);
this.http.post(‘http://node.futures-services.com:9000/api/authenticate/’, JSON.stringify({name:name,Kennwort:Kennwort}), {headers: headers})
.subscribe(res => {
let data = res.json();
this.token = data.token;
this.storage.set(‘token’, data.token);
resolve(data);
resolve(res.json());
}, (err) => {
reject(err);
});

});

}

logout(){
this.storage.set(‘token’, ‘’);
}

}


#2

You need to check if the token is set in app.component.ts and redirect the user to the login page only if it’s not set.


#3

I don’t understand what exactly can you please explain some more here is my app.component.ts file

import { Component,ViewChild } from '@angular/core';

import { Platform,AlertController,Nav} from ‘ionic-angular’;
import { StatusBar, Splashscreen } from ‘ionic-native’;
//import { HomePage } from ‘…/pages/home/home’;
import { LoginPage } from ‘…/pages/Authentication/login/login’;
//import { NewsPage } from ‘…/pages/News/news/news’;
import { UneveraslseitePage} from ‘…/pages/Universalseite/universalseite/universalseite’;
import { Authservice } from ‘…/providers/authservice’;
import {TabsPage} from ‘…/pages/tabs/tabs’;
//import { ChartsPage } from ‘…/pages/Charts/charts’;
//import { RpiPage } from ‘…/pages/RPI/rpi/rpi’;

export interface PageInterface {
title: string;
component: any;
icon: string;
logout?: boolean;
index?: number;
}

@Component({
templateUrl: ‘app.html’
})
export class MyApp {
@ViewChild(‘content’) navigate;
@ViewChild(Nav) nav: Nav;

rootPage = LoginPage;
activePage: any;

pages: PageInterface[] = [
{ title: ‘Verlaufe’, component: UneveraslseitePage, icon: ‘construct’ },
{ title: ‘exit’, component: LoginPage, icon: ‘log-out’, logout: true }
];

constructor(public platform:Platform,public auth:Authservice,public alertCtrl:AlertController) {
platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
});
this.activePage = this.pages[0];
}

openPage(page: PageInterface) {
if (page.index) {
this.nav.setRoot(page.component, { tabIndex: page.index });
} else {
this.nav.setRoot(page.component);
}

 this.activePage = page;

   if (page.logout === true) {
 this.auth.logout();
let alert = this.alertCtrl.create({
subTitle: 'Log out Successfully ',
buttons: ['Ok']

});
alert.present();
}
}

checkActive(page){
return page == this.activePage;
}

}


#4

You have to do something like this:

rootPage: any;

constructor(storage: Storage) {
     storage.get('token').then((token) => {
          this.rootPage = TabsPage; //your main page
     }, (error) => {
          this.rootPage = LoginPage;
     });
}

#5

But initially it takes direct to main page even i log out and came back it redirects main page with out login page so is it any problem with this.storage.set(‘token’, data.token);


#6

have you got it ?? if yes, share the app.component.ts code