0

My situation is that I have two parts in one Angular site, A User and B User. These two users have different Layout styles, menu, etc. They are linked to my site from another site, so I have to provide two URLs for them, for example, 'xxx.com/A' for A User, 'xxx.com/B' for B User.

I'm not able to use "{ path: '', redirectTo: '/login', pathMatch: 'full' }" in routing because I have two index/first pages, but if I configure app-routes.module.ts like following:

const routes: Routes = [
  //{ path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login/A', component: LoginComponent},
  { path: 'login/B', component: LoginComponent}
];

Then when I run it on IIS, I got 404 ERROR.

enter image description here

I know 404 ERROR might be because of IIS URL Rewrite, but I'm not able to add it on server. Is there anyway I can determine two different users when they link to my site, or is there anyway to make two direct urls work? Thank you.

1 Answer 1

0

I edit my answer so maybe I get you into the right direction. As I understand you have 2 requirements.

1) Identify if the visitor is UserA or UserB

2) Change behaviour of the website depending on UserA or UserB

First of all to identify the user we should pass some parameter from referer site. Normally this should be done with an SSO mechanism (token, etc). But in this case to simplify the case with stay with an Querystring parameter.

User A: http://yoursite.com?user=a

User B: http://yoursite.com?user=b

So now we can identify if we are "talking" with User A or User B. From now on we can customize the entire application with our needs:

Different Layouts, Different routings etc.

To have different routes configured on specific use cases what you could do is to configure different route definitions.

const standardRoutes: Routes = [
    {
    path: 'main',
    loadChildren: 'app/main/standard/some.module#SomeModule',
    canActivate: [AuthenticationGuard]
},
{
    path: 'login',
    component: LoginComponent
},
{
    path: '**',
    redirectTo: 'main/standard'
}
]

const AUserRoutes: Routes = [
{
    path: 'main',
    loadChildren: 'app/main/a_user/some.module#SomeModule',
    canActivate: [AuthenticationGuard]
},
{
    path: 'login',
    component: LoginComponent
},
{
    path: '**',
    redirectTo: 'main/a_user_url'
}];

const BUserRoutes: Routes = [
{
    path: 'main',
    loadChildren: 'app/main/b_user/some.module#SomeModule',
    canActivate: [AuthenticationGuard]
},
{
    path: 'login',
    component: LoginComponent
},
{
    path: '**',
    redirectTo: 'main/b_user_url'
}];

Then in App Module to handle the different Users (if there is a need to define different routings - normally only needed in some very special cases)

const standardRoutes: Routes = [
    {
    path: 'main',
    loadChildren: 'app/main/standard/some.module#SomeModule',
    canActivate: [AuthenticationGuard]
},
{
    path: 'login',
    component: LoginComponent
},
{
    path: '**',
    redirectTo: 'main/standard'
}
]

const AUserRoutes: Routes = [
{
    path: 'main',
    loadChildren: 'app/main/a_user/some.module#SomeModule',
    canActivate: [AuthenticationGuard]
},
{
    path: 'login',
    component: LoginComponent
},
{
    path: '**',
    redirectTo: 'main/a_user_url'
}];

const BUserRoutes: Routes = [
{
    path: 'main',
    loadChildren: 'app/main/b_user/some.module#SomeModule',
    canActivate: [AuthenticationGuard]
},
{
    path: 'login',
    component: LoginComponent
},
{
    path: '**',
    redirectTo: 'main/b_user_url'
}];

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        RouterModule.forRoot(standardRoutes, {
            enableTracing: false
        }),

      
    ],
    providers: [
       
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
    public constructor(
        private router: Router
    ) {
        const user = router.routerState.snapshot.root.queryParams.user;
        if (user === 'a') {
            router.resetConfig(AUserRoutes);
        } else if (user === 'b') {
            router.resetConfig(BUserRoutes);
        
        }
 
    }
}

Sign up to request clarification or add additional context in comments.

2 Comments

Thank you very much for reply. By this way, it seems that the Url for both users to link are the same? If the URL are the same, I'm not able to specify which user is browsing the site. Or am I missing something? Thank you.
I edited the sample to simulate different users on incoming urls based on Querystring. Normally in this cases there should be used some SSO mechanism, but for simplicity I am using Querystring to show the sample.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.