I have a main-routing module in which I redirect all the different routes in my app.
const routes: Routes = [
{
path: '',
component: MainComponent,
children: [
{ path: '', pathMatch: 'full', redirectTo: '' }, // The Problem
{ path: 'startComponent1', loadChildren: loadStartComponent1Module(), data: { title: 'startComponent1' } },
{ path: 'startComponent2', canDeactivate: [ExternGuard], loadChildren: loadStartComponent2Module(), data: { title: 'startComponent2' } },
]
}
]
The loadStartComponent1Module() functions only pass the lazyloading string.
So far so good. Now I have two different types of users. Usertype 1:
- Can access startComponent1
- Can access startComponent2
- Routing starts at Component1
I would change my routing to this:
//... unchanged
{ path: '', pathMatch: 'full', redirectTo: 'startComponent1' }, // The Problem
//... unchanged
My second User:
- Cannot access startComponent1
- Can access startComponent2
- Routing starts at Component2
The access I can control over guards. But what can I do with the empty path? Can I distinguish beetween user 1 and 2 ? Something like this:
//will not work
//...unchanged
{ path: '', pathMatch: 'full',
if(userA){
redirectTo: 'startComponent1'
}else {
redirectTo: 'startComponent2'
}
}, // The Problem
//...unchanged
Should I attempt to solve this problem with resolvers? Should I define 2 different arrays for both types of users where only the problem line is changed?
But maybe there is an easier solution for this problem.