Change the root page based on data

Ionic Framework ionic-v3
1

Hi everyone.

I need to set two root pages for my app:

1 - when the users visit the app for the first time, they’ll land on PageOne and will be asked for a name (which will be stored with storage). Then they will click the button, which leads them to the PageTwo.
2 - when they visit again (the app checks if the name exists), they’ll land on PageTwo straight away.

How can I achieve this?

Thank you.

Regards,
Olga

1 Like
2

I have this function in my app.component.ts. After the login flow, I set an Item in the localStorage and check on app startup if the item is already set or not

setRootPage() {
   console.log('setting root page...')
   if (localStorage.getItem('access_token') == null){
       this.rootPage = LoginPage
    } else {
       this.rootPage = TabsPage;
    }
}
1 Like
3

Uuu, thanks!

I’ve added the same function to my app.component.ts:
export class MyApp {
public rootPage: any;

constructor(platform: Platform,
public storage: Storage
)
{
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
this.setRootPage();
});
}

setRootPage() {
if (this.storage.get(“gender”) == null){
this.rootPage = SettingsPage;
} else {
this.rootPage = MainPage;
}
}
}

and now I have this error:
“EXCEPTION: Error in ./MyApp class MyApp - inline template:0:9 caused by: Maximum call stack size exceeded”

Did you come across this error as well?

4

well i don’t use the async storage i use the localstorage, maybe the error comes from there? Just a guess tho…

1 Like
5

storage.get does not return the actual value. It returns a Promise that resolves with the value once it’s ready.

this.storage.get("gender").then((gender) => {
  if (gender) {
    this.rootPage = MainPage;
  } else {
    this.rootPage = SettingsPage;
  }
});
6

oh, I see now. Thanks a lot!!