Having trouble navigating different routes.
I'm working with two separate route modules.
app.routes.ts:
This module contains only the LoginPage:
export const routes: Routes = [
{
path: 'login',
component: LoginPageComponent,
canActivate: [PreventLoggedInAccess]
},
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: '**',
redirectTo: 'login'
}
];
export const Routing: ModuleWithProviders =
RouterModule.forRoot(routes, { useHash : true });
The PreventLoggedInAccess.canActivate function redirects already logged in users to the `/app/home` section. It's defined as follows:
canActivate(): boolean {
if (!this._authService.isAuthenticated()) {
return true;
}
this._router.navigate(['/app/home']);
return false;
}
pages.routes.ts:
This module contains all subroutes under `/app` that are only accessible when the user is logged in. This requirement is met by using
AuthGuardService.canActivateChildexport const pageRoutes: Routes = [
{
path: 'app',
component: PagesComponent,
canActivateChild: [AuthGuardService],
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomePageComponent },
{ path: 'contents', component: ContentsComponent },
]
}
];
export const Routing: ModuleWithProviders = RouterModule.forChild(pageRoutes);
In this case, any attempt to access an `/app` child route without being logged in will result in a redirect to the login page. The logic is implemented within
AuthGuardService.canActivateChildcanActivateChild(): boolean {
if (this._authService.isAuthenticated()) {
return true;
}
this._router.navigate(['login']);
return false;
}
Encountered behavior where navigating from `app/home` to `app/contents` requires two attempts for proper redirection to the `ContentsComponent`. On the first navigation, it briefly switches routes before reverting back to `app/home` unless the navigation command is executed twice consecutively. However, transitioning from `app/contents` to `app/home` works smoothly on the first try.
The functionality of `isAuthenticated` and both authguards has been validated. Unauthorized access to any `app` child route triggers a redirect to the login page, while attempting to access `login` when already authenticated results in a redirect to `app/home`.
Further investigation revealed the following flow:
- First attempt - `app/home` -> `app/contents`:
- Execute `navigate(['app/contents'])`
- Invoke `PreventLoggedInAccess.canActivate`
- Invoke `AuthGuardService.canActivateChild`
- Second attempt - `app/home` -> `app/contents`:
- Execute `navigate(['app/contents'])`
- Invoke `AuthGuardService.canActivateChild`
The expected behavior aligns with the outcome of the second attempt.
EDIT
By removing `this._router.navigate([/app/home]);` from `PreventLoggedInAccess.canActivate`, the issue is resolved:
canActivate(): boolean {
if (!this._authService.isAuthenticated()) {
return true;
}
return false;
}
However, the question remains: why is `PreventLoggedInAccess.canActivate` triggered when navigating to an `app` child despite `AuthGuardService.canActivateChild` being bound to it? Why does it occur only on the initial attempt?