ionic tabs app that is having issues with setRoot and Push

1
votes

I have an ionic tabs app that is having issues with its views. In addition to 4 tab pages, I also have several generated pages for login, register, update profile and addtodo. I have the 

rootPage:any = 'LoginPage';

in the app.component.ts and then when you click on the login() function in the login.ts module, I have 

await this.navCtrl.setRoot(TabsPage);

Once the user is logged in and taken to the TabsPage the url is: http://localhost:8100/#/login

From here everything works correctly. I have a signOut() function: 

 signOut(){
  this.afAuth.auth.signOut().then(res => {
  this.navCtrl.push(LoginPage);
 });
 }

This signs the user out, but since the Tabs are still displayed at the bottom I used

 window.location.reload()

to refresh the page and then it all looks correct.

The issue arises when the user clicks the "update profile" button on home page, which uses this function

    updateProfile(){
    this.navCtrl.push('ProfilePage');
    }

And the user is sent to http://localhost:8100/#/home/profile where they can update their profile. Then when you return to the homepage the url is still http://localhost:8100/#/home/profile and when you trigger the SignOut() function you are taken to http://localhost:8100/#/profile and it is displayed as a setRoot view for some reason.

Mainly, I am looking for a way to override all of this and make it so that when the signOut() function is triggered it simply returns the user to the rootPage, which is the 'LoginPage'.

I apologize for run on sentences and grammar errors.

2
angularionic-frameworkview

2 Answers

1
votes

add this code to your constructor in the app.component.ts file. You'll have to import firebase and angularfire2/auth into the app.component.ts file as well.

   import { AngularFireAuth } from 'angularfire2/auth';
   import * as firebase from 'firebase';


        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.rootPage = ProfilePage
            } else {
                this.rootPage = LoginPage
            }
        })

https://firebase.google.com/docs/reference/js/firebase.auth.Auth#onAuthStateChanged

onAuthStateChanged is an observer which is triggered everytime a user signs in or signs out.

0
votes

You can import the app.component.ts page to get rootPage refer. So, you can do like this:

import {appName} from '../../app/app.component';
 ...
 constructor(private app: appName) {}

 clickNewPage(newPage: string) {
   this.app.rootPage = newPage;
}