[Ionic 4] navigateRoot

Ionic Framework ionic-v3
1

I’m trying to implement a Login screen before a Home page, and I want to prevent users going back to the Login after logging in.
I’ve tried this:

this.navCtrl.navigateRoot('/home');

But it performs the same as this this.navCtrl.navigateForward('home');, and pressing the hardware or web button I still can go back. So how can I set a root page in Ionic 4?

My routing module looks like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'home', loadChildren: '../pages/home/home.module#HomePageModule' },
  { path: 'login', loadChildren: '../pages/login/login.module#LoginPageModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I’m using NavController for navigating and Ionic 4.0.0-beta.12. Thanks in advance.

1 Like
2

you can use ionic Storage and add session.

3

Could you explain a bit more your reply about sessions?
Why NavController does not work correctly on Ionic 4?

Solved by the new Router of Angular 6

https://angular.io/api/router/Router

!!

4

@Parga can you explain how are you using it? I’m currently handling this with this code in the Login and in my Home button for closing the app:

    // Catch back button calls and close the app
    ionViewDidEnter() {
        this.backButtonAction = this.platform.backButton.subscribe(() => {
            navigator['app'].exitApp();
        }, 10);
    }

    // Unregister the custom back button action
    ionViewWillLeave() {
        this.backButtonAction.unsubscribe();
    }

Then the app closes successfully.

5

Using the new Angular 6 Router with an option called skipLocationChange, like this!

import { Router } from '@angular/router';

  constructor(
    public router: Router,
    ) { }

   doLogin(){
      this.router.navigateByUrl('/dashboard', { skipLocationChange: true });
   }

Don’t forget to add the /dashboard route to the app-routing.module.ts

{ path: 'dashboard', loadChildren: './pages/Dashboard/Dashboard.module#DashboardPageModule' },

Regards!!

1 Like