Issue
I would like to configure my lazy loaded routes nested, which are only available if the users is logged in. Authentication works with Auth0s and it's corresponding AuthGuard. So for example my routes look like this :
const routes: Routes = [
{
path: ':id',
children: [
{
path: '',
children: [ {
path: 'first-component',
loadChildren: () => import('./first-component.module').then((m) => m.FirstComponentModule),
canLoad: [AuthGuard],
},
{
path: 'second-component',
loadChildren: () => import('./second-component.module').then((m) => m.SecondComponentModule),
canLoad: [AuthGuard],
},
],
},
{
path: '',
pathMatch: 'full',
redirectTo: 'first-component',
},
],
},
{
path: ':id',
redirectTo: ':id',
pathMatch: 'full',
},
{
path: '**',
component: PageNotFoundComponent,
},
];
the :id
paramter is needed, and should stay in the url so it should look like this:
my-app/ID123/first-component
But authentication I am redirected to /ID123 -> not found
What am I missing?
Solution
The guard should not be the problem.
You can try this simplified routes configuration:
const routes: Routes = [
{
path: 'not-found',
component: PageNotFoundComponent,
},
{
path: ':id',
canLoad: [AuthGuard],
children: [
{
path: 'first-component',
loadChildren: () => import('./first-component.module').then((m) => m.FirstComponentModule),
},
{
path: 'second-component',
loadChildren: () => import('./second-component.module').then((m) => m.SecondComponentModule),
},
{
path: '**',
pathMatch: 'full',
redirectTo: 'first-component',
},
],
},
{
path: '**',
redirectTo: 'not-found',
},
];
If this configuration does not work, please send your parent routing configuration.
It is possible that the issues is there.
Answered By - Norbert Bartko
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.