Invalid url in Angular should check some condition before redirecting

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/58890401/invalid-url-in-angular-should-check-some-condition-before-redirecting

标签

javascript

html

angular

routing