Hi there, Ionicists!
I’m developing a PWA using the v4 (with ng 6.x) with a team. We’re currently close to the end of development for the first phase, but there is a bottleneck we are facing.
Imagine that our current flow of screens is the following: (Yes, there is some kind of exaggeration on the login stuff, but we were required by our customer to follow a pattern they already have on a working software, specially due to our target users)
-
pre-login: The user is prompted to continue authentication or as a guest, which has limited features. It’s the root page when they open the app.
-
login: If the user decides to log in, they input user/password and reset it thru this screen.
-
home: A home screen, with our customer logo and directions to our features, version etc. Just dummy static content. Should be our new root page after log in as authenticated/guest
-
[feature screen]: screens with features required by our customer, such as graphs, data and such.
Our issue is: I was supposed to set the root page before login to our pre-login page, and after the user is authenticated, on home page, so that when they hit the back button, it goes to the root page.
If user goes: HomePage > FirstPage > SecondPage and hit back, they return to home instead of FirstPage or the level of screens he has navigated through - and if they hit again at HomePage, it should close the PWA.
I tried almost everything I saw on forums and internet. Using navigateRoot, changing the Router.navigateByUrl() calls, and such but i can’t get this behavior to work.
Also, platform.backButton.subscribe() doesn’t get triggered on the PWA.
Any tips on how to deal with it? I’m also attaching our app-routing-module.ts for reference.
import { AuthService } from '@services';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PreLoginComponent, OidcComponent, RedirectSilentRenewComponent } from '@components';
const routes: Routes = [
{
path: '',
loadChildren: './pages/pre-login/pre-login.module#PreLoginPageModule',
},
{
path: 'home',
loadChildren: './pages/home/home.module#HomePageModule',
},
{
path: 'lista-atracacao',
loadChildren: './pages/lista-atracacao/lista-atracacao.module#ListaAtracacaoPageModule',
},
{
path: 'login',
loadChildren: './pages/login/login.module#LoginPageModule',
},
{
path: 'yard-kpi',
loadChildren: './pages/yard-kpi/yard-kpi.module#YardKpiPageModule',
canActivate: [AuthService],
},
{
path: 'gestao-a-vista',
loadChildren: './pages/gestao-a-vista/gestao-a-vista.module#GestaoAVistaPageModule',
canActivate: [AuthService],
},
{
path: 'retencao',
loadChildren: './pages/retencao/retencao.module#RetencaoPageModule',
canActivate: [AuthService],
},
{
path: 'tracking-carga',
loadChildren: './pages/tracking-carga/tracking-carga.module#TrackingCargaPageModule',
canActivate: [AuthService],
},
];
routes.push({
path: '**',
redirectTo: 'home',
});
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: false })],
exports: [RouterModule],
})
export class AppRoutingModule {}
