0

My initial domain is localhost:4200 and which in redirects me to some page, based on my routing, but I want to input an invalid domain for example localhost:4200/Whasup or localhost:4200/Whasdown, where Whasup and whasdown page doesn't exist. Before i get redirected to default Angular 404 page, I need to check some conditions. And if my condition doesn't satisfy then i want to redirect it to 404 page else i want to handle it.

my app-routing.module.ts (Auth Guard Checks if the user is logged in or Not)

const routes: Routes = [
  // Fallback when no prior route is matched
  // Shell.childRoutes([]),
  // { path:'home', component: HomeComponent},
  // { path: '**', redirectTo: '', pathMatch: 'full' }

  Shell.childRoutes([
    { path: '', component: RedirectToComponent, canActivate: [AuthGuard] },
    {
      path: 'dashboard',
      loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule',
      canActivate: [AuthGuard]


    },
    {
      path: 'exec-dashboard',
      loadChildren:
        'src/app/exec-dashboard/exec-dashboard.module#ExecDashboardModule',
      canActivate: [AuthGuard]
    },
    {
      path: '**',
      redirectTo: '',
      canActivate: [AuthGuard]
    }
  ]),
  {
    path: 'auth',
    loadChildren: 'src/app/auth/auth.module#AuthModule',
    canActivate: [AuthGuard]
  }

];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      enableTracing: false, // Enable for debug purpose.
      useHash: true,
      preloadingStrategy: PreloadAllModules
    })
  ],
  exports: [RouterModule],
  providers: [AuthGuard]
})

I have also implemented KeyCloak Angular interceptor which helps me get to the keycloak login page, if user is not logged. I have providers defined in app.module.ts.

 providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializer,
      multi: true,
      deps: [KeycloakService]
    }
  ],

So whenever I hit my initial domain(localhost:4200), intializer function gets called before i get redirected to any page, same should happen with invalid sub-domain url(localhost:4200/Whasup). Edit: Can i implement above mentioned by any chance, or can i implement sub domain logic in angular, for example, tenant1.localhost:4200 or tenant2.localhost:4200 , (when deployed it would be tenant1.mycompany.com). Can someone suggest me a way to implement sub domain routing in angular. Thanks Much.

Satya Ram
  • 99
  • 2
  • 10
  • From what you described you want to redirect the user to the login page if the user lands on a page that does not exist. This logic has nothing to do with having subdomains or not. You can simply redirect to the login page for the "**" in the route config (https://stackoverflow.com/a/36261194). I think this is what you are after. – Daniel Grima Nov 17 '19 at 09:39
  • @DanielGrima if you see my app-routing module, i have already done that part, Actually in my case, when i start my application, it should not redirect to localhost:4200, it should directly go to localhost:4200/tenantname or tenantName.localhost:4200. – Satya Ram Nov 17 '19 at 15:37
  • I've posted an answer as my explanation could not fit in a comment. Hope it helps. – Daniel Grima Nov 17 '19 at 17:37

1 Answers1

0

I will post here as my explanation will not fit in a comment. I'm not sure if this will necessarily answer your question as there are a number of things to consider. So here it goes...

Note

If you want your application to work with subdomains you cannot use localhost together with subdomains (like tenantName.localhost:4200) to test locally, you'll have to setup custom domains using the hosts file. You can see an example of this here. Personally I prefer having a /tenantname rather than a subdomain, but that's personal preference and based on your business requirements I guess.

Handling Redirections

Whether working with subdomains or the client name as part of the URL, you should be able to handle the "automatic redirection" to the "tenant URL" after the user is logged in. I am assuming that after a successful login as part of the response you will have the tenant name. Once you have the tenant name you can easily redirect the user to the correct URL.

I am mentioning this because in your last comment you stated that on application start you want to redirect to a "tenant specific" URL. Important: Without the user being logged in you cannot know which URL to redirect to.

Now if the user is logged in and they access the website? Well in the AuthGuard you can have a condition that checks if the user is logged in, and if yes redirect the user to the correct tenant URL. Again this is me assuming that as part of the login response you have some information that allows you to know the tenant that the user belongs to.

In short I would suggest:

  • Make sure that the response of a successful authentication returns some information about the tenant.
  • Using the tenant information in your authentication response, you can handle redirect the user to the correct tenant URL from the Angular app.
  • Also keep in mind that you need to handle cases when a user tries to access a URL of a tenant that they do not have access to.
Daniel Grima
  • 2,765
  • 7
  • 34
  • 58
  • Hi @DanielGrima, Thanks for the efforts, but my starting point to start my application would be tenantName.localhots:4200 then i will get redirected to login portal, before I login, I should have tenant information based on url.Then based on my tenant information validation i will redirect to login page. – Satya Ram Nov 18 '19 at 06:23
  • Okay then have a "static" page that is simply used to redirect the user to the login page. So your home page will be on localhost:4200 and you place a "Login" button there that when clicked you will redirect the user to the portal. On login success you redirect the user to the correct tenant URL. That way you don't have to worry about what the starting point of your application should be. – Daniel Grima Nov 19 '19 at 08:06
  • Hi @DanielGrima, I am trying to achieve something like this: "localhost:4200/tenantName" or localhost:4200/tenantName2, basically i want to append a string to my hostname, and this hostname has to be string and this in response redirects me to login page, so after hitting localhost:4200/tenantName it should redirect to localhost:4200/tenantName/ui/dashboard/login, all other routes will follow localhost:4200/tenantName/${}. Can something of this sort can be done. – Satya Ram Dec 16 '19 at 08:46