在 Ionic 5 路由器中登录/注销时登录/主页不会被破坏

Question

My project is in IONIC 5 and Firstore. There are 2 different ion-router-outlet for authenticated (Home) and unauthenticated (Index) routes. Following is the code for dynamically opening the login/home page for users in class app.component.ts .

  this.afAuth.authState.subscribe(user => {
    if (user) {
      this.router.navigateByUrl('home');
    } else {
      this.router.navigateByUrl('index');
    }
  }); 

Flow: Login Page -> (login) -> Home Page -> (logout) -> Login Page. When the Home page is open the Login page is still loaded and in the navigation stack. The ngOnDestroy of the Login page does not execute. After the logout, the Login page opens again but the class constructor and ngOnInit method does not execute. This is causing a lot of issues as the page initialization is not reloading. The same issue happening for flow Home Page -> (logout) -> Login Page -> (login) -> Home Page. How can I destroy the Login page after login and Home page after logout so that those can reload if reopened in the same session?

EDIT:

Following is the routing config:

app-routing.module.ts

const routes: Routes = [
  {
    path: 'home',
    canLoad: [AuthGuard],
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'index',
    loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule)
  },
];

Both the Home.html and Index.html has the same following code.

<ion-content>
  <ion-router-outlet></ion-router-outlet>
</ion-content>

index-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: IndexPage,
    children:[
      {
        path: '',
        loadChildren: () => import('../pages/login/login.module').then( m => m.LoginPageModule)
      },
    ]
  }
];

home-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: HomePage,
    children:[
      {
        path: '',
        loadChildren: () => import('../pages/user/user.module').then( m => m.UserPageModule)
      },
.....
Other authenticated pages
]

Answer 1

Easiest solution that would work, you should navigate to the route with "replaceUrl" NavigationExtras

this.router.navigate(['/home'], { replaceUrl: true });

This replaces the current state in the history, and therefore your Login page will be destroyed. Basically it sets a new root.

Reference

Answer 2

The seemingly unexpected behavior you are describing is due to Ionic. More specifically, it is due to how Ionic deals with the life of a page .

When you navigate to a new page, Ionic will keep the old page in the existing DOM, but hide it from your view and transition the new page.

...

Because of this special handling, the ngOnInit and ngOnDestroy methods might not fire when you would usually think they should.

ngOnInit will only fire each time the page is freshly created, but not when navigated back to the page. For instance, navigating between each page in a tabs interface will only call each page's ngOnInit method once, but not on subsequent visits. ngOnDestroy will only fire when a page "popped".

Without knowing much about your application, I would suggest using the Ionic Lifecycle events instead of the Angular ones for your page components. It sounds like you can probably just replace ngOnInit with ionViewWillEnter and replace ngOnDestroy with ionViewWillLeave or ionViewDidLeave .

Further down in the documentation is some useful guidance for each lifecycle method

Answer 3

I think you are facing the problem for destroying the previous page. In Iconic when you navigate to the other page, it still maintains the previous one in the DOM.

So your ngOnDestroy() is not being called.

You can just replace your navigate() function to the navigateRoot() . This would resolve your issue and would completely gets destroyed.

So your line of codes should be somewhat look like:

 this.afAuth.authState.subscribe(user => {
  if (user) {
    this.router.navigateRoot('home');
  } else {
    this.router.navigateRoot('index');
  }
 }); 

I hope this would resolve your issue.