Hi,
Im using ionic 3
How can i completely skip the signup/login page when the user loads the app. So if there is a user session object it takes them straight to the tabs page.
I thought about adding in the constructor of the signup page a check to see if the session object exists, if it does redirect to diff page, but seems kind of inefficient.
What do you mean by “session object” ?
If you store something in localstorage (or elsewhere) after login/signup that indicates that the user is logged in you can do something like this in the app.component:
this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
this.rootPage = this.currentUser
? OtherPage
: SignupPage;
Ye ofc, thats what i want to do, but my question was where is the best place to implement this?
constructor(
platform : Platform,
statusBar : StatusBar,
splashScreen : SplashScreen,
) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
this.rootPage = this.currentUser
? OtherPage
: SignupPage;
})
}
Ty ill give it go, just a side comment why do you use localStorage instead of @ionic/storage.
This is how i get my session.
this.storage.get('user').then((user) => {
this.user = user;
});
but your interaction with session object seems much simpler.
Mine was just an example don’t rely on local storage for mobile devices you are better with @ionic/storage.
So i have tried to implement this, injected my auth provider in the consutrctor of app.components.
Then on the platform.ready i check to see if there is a user (later i will redirect if found). but when i console log that user i get undefined. There is deffi a user session object as i can see that in google chrome.
app.components.ts
constructor(private translate: TranslateService, private platform: Platform, settings: Settings, private config: Config, private statusBar: StatusBar, private splashScreen: SplashScreen, private auth: Auth) {
this.initTranslate();
platform.ready().then(() => {
console.log(this.auth.getUser());
});
}
auth.ts
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {Api} from './api';
import {Settings} from './settings';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {Storage} from "@ionic/storage";
@Injectable()
export class Auth {
isLoggedIn: Boolean;
user: any;
constructor(public http: Http, public api: Api, public settings: Settings, public storage: Storage) {
this.storage.get('user').then((user) => {
this.user = user;
this.isLoggedIn = true;
});
}
login(user) {
return this.storage.set('user', user).then(() => {
this.isLoggedIn = true;
this.user = user;
});
}
logout() {
this.storage.remove('user').then(() => {
this.isLoggedIn = false;
this.user = null;
});
}
isAuthenticated() {
return this.isLoggedIn;
}
getUser() {
return this.user;
}
}
Not able to test what i am typing now but here is an idea in auth.ts
getUser() {
return this.storage.get('user')
}
and in app.component
this.auth.getUser().then((user) => {
// do redirects here
})
Im already doing storage.get in the constructor of the auth.ts. So when the provider is loaded it should store a user variable.
I know that it woks as i have done something similar in my profile page.
profile.ts
constructor(public navCtrl: NavController, public navParams: NavParams, public auth: Auth) {
this.user = this.auth.getUser();
console.log(this.user);
}
Your change does FIX it, but i dont understand why my method not working when its worked else where.
Is there something diff about the app.components…
Ok i don’t really have an exact answer for your question but this is what i think. When you inject your service to the component the constructor function runs in your case it set the properties asynchronously and you rely that this operation will be resolved before your method get’s called maybe i am totally wrong here but i wouldn’t rely on that, i prefer my approach. Now if you want to stick with yours maybe try a singleton approach for the auth class, i think the way to do it is to define the class in the app.module.ts file
I agree with @wingly on the cause of the problem. This is precisely why I do my best to avoid storing raw data in service providers. See this discussion for more backstory and alternatives.