Angular2/4+ASP.NET Core多角色应用：多入口页面实现咨询

Great question! What you're trying to build—three distinct, large-scale user experiences tied to roles, with optimized initial load performance—is totally doable with Angular's lazy loading paired with ASP.NET Core's server-side authorization. Let's walk through how this works, step by step:

Core Concept #

The key here is to split your Angular app into role-specific feature modules that only load when needed, while using ASP.NET Core to handle authorization upfront. This way, your initial index.html and main bundle stay small (only loading core auth and shared code), and each user only downloads the code relevant to their role.

Step-by-Step Implementation #

1. Server-Side Authorization & Routing (ASP.NET Core) #

First, handle user authentication and role validation on the ASP.NET Core side:

• Use ASP.NET Core Identity (or your custom auth system) to authenticate users and retrieve their role (employee/customer/partner) after login.
• Create a middleware or action method that redirects the user to the appropriate Angular route based on their role. For example:

  [Authorize]
  public IActionResult RedirectToRoleHome()
  {
      if (User.IsInRole("Employee"))
          return Redirect("/employee/dashboard");
      if (User.IsInRole("Customer"))
          return Redirect("/customer/profile");
      if (User.IsInRole("Partner"))
          return Redirect("/partner/dashboard");
      return Redirect("/auth/login");
  }
  

• Ensure your ASP.NET Core static file middleware is set up to serve Angular's files, and use fallback routing to let Angular handle client-side routes.

2. Angular Lazy Loading Setup #

Split each role's functionality into a separate lazy-loaded feature module:

• Create three feature modules: EmployeeModule, CustomerModule, PartnerModule. Each will contain its own routing, components, services, and business logic.
• Configure your root AppRoutingModule to load these modules lazily using the dynamic import() syntax. This tells Angular CLI to bundle each module into a separate chunk that only loads when the route is accessed:

  const routes: Routes = [
    { 
      path: 'employee', 
      loadChildren: () => import('./employee/employee.module').then(m => m.EmployeeModule),
      canActivate: [RoleGuard] // Protect route with role check
    },
    { 
      path: 'customer', 
      loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule),
      canActivate: [RoleGuard]
    },
    { 
      path: 'partner', 
      loadChildren: () => import('./partner/partner.module').then(m => m.PartnerModule),
      canActivate: [RoleGuard]
    },
    { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) },
    { path: '', redirectTo: '/auth/login', pathMatch: 'full' },
  ];
  

• Build a RoleGuard service that checks if the user's role matches the required route. This guard should call your ASP.NET Core API to validate the role server-side (never trust client-side-only checks):

  @Injectable({ providedIn: 'root' })
  export class RoleGuard implements CanActivate {
    constructor(private authService: AuthService, private router: Router) {}
  
    canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
      const requiredRole = route.data['requiredRole'];
      return this.authService.validateRole(requiredRole).pipe(
        map(isValid => {
          if (!isValid) {
            this.router.navigate(['/auth/login']);
            return false;
          }
          return true;
        })
      );
    }
  }
  

  Then update your routes to include the required role:

  { 
    path: 'employee', 
    loadChildren: () => import('./employee/employee.module').then(m => m.EmployeeModule),
    canActivate: [RoleGuard],
    data: { requiredRole: 'Employee' }
  }
  

3. Optimize Initial Load #

• Use Angular's production build (ng build --configuration production) which enables tree-shaking, code minification, and chunk hashing to reduce bundle sizes.
• Move shared components/services into a SharedModule that's imported only where needed, avoiding unnecessary code in the main bundle.

Alternative: Separate Entry Pages #

If you prefer completely separate entry points (instead of lazy loading within a single app), you can set this up too:

• In angular.json, add three separate projects (one for each role) with their own main.ts and index.html files.
• Build each project to a separate directory in wwwroot (e.g., wwwroot/employee, wwwroot/customer).
• In ASP.NET Core, after authorization, redirect the user to the corresponding entry page (e.g., /employee/index.html).
• Note: This approach may lead to duplicate code (like shared dependencies) between projects, so lazy loading is generally more efficient unless your modules have zero shared code.

Why This Works #

• Server-Side Authorization: Ensures users can't even access routes they don't have permission for, preventing unnecessary code downloads.
• Lazy Loading: Angular only loads the module chunk when the route is activated, keeping your initial load time fast even with 40-50 components per module.
• Dual Validation: Combining server-side role checks with Angular route guards ensures your app is both performant and secure.

Example Project Structure #

Here's how your Angular project might be organized:

src/
├── app/
│   ├── auth/                    # Core auth module (login, role validation)
│   │   ├── auth.module.ts
│   │   ├── role.guard.ts
│   │   └── login/
│   ├── shared/                  # Shared components, services, utilities
│   │   ├── shared.module.ts
│   │   └── ...
│   ├── employee/                # Employee feature module (all 40-50 components)
│   │   ├── employee.module.ts
│   │   ├── employee-routing.module.ts
│   │   └── components/
│   ├── customer/                # Customer feature module
│   │   ├── customer.module.ts
│   │   ├── customer-routing.module.ts
│   │   └── components/
│   ├── partner/                 # Partner feature module
│   │   ├── partner.module.ts
│   │   ├── partner-routing.module.ts
│   │   └── components/
│   ├── app.module.ts
│   └── app-routing.module.ts
└── angular.json

内容的提问来源于stack exchange，提问作者Kirill Ilin