Angular 5中如何按条件配置app-routing.module加载不同子路由模块

嘿，这事儿用Angular的路由守卫就能轻松搞定！核心思路是给根路由（''）加一个自定义守卫，在守卫里调用你的AuthService判断条件，然后动态重定向到对应的模块路由。下面一步步来实现：

1. 先确认你的AuthService判断方法 #

假设你的AuthService里有个用来判断跳转条件的方法，比如isQualifiedForHome()，返回布尔值或者异步Observable：

// auth.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  // 示例逻辑：根据实际业务调整（比如判断用户是否登录/有权限）
  isQualifiedForHome(): boolean {
    return !!localStorage.getItem('validAuthToken');
  }
}

2. 创建自定义路由守卫（AuthRedirectGuard） #

这个守卫会在进入根路由前执行判断，然后重定向到目标模块：

// auth-redirect.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthRedirectGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const goToHome = this.authService.isQualifiedForHome();
    if (goToHome) {
      this.router.navigate(['/home']); // 跳转到Home模块根路由
    } else {
      this.router.navigate(['/user']); // 跳转到User模块根路由
    }
    return false; // 已重定向，阻止当前根路由激活
  }
}

3. 配置AppRoutingModule #

把根路由绑定到守卫，同时配置Home和User模块的懒加载路由：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthRedirectGuard } from './auth-redirect.guard';

const routes: Routes = [
  // 根路由触发守卫，动态重定向
  { path: '', canActivate: [AuthRedirectGuard] },
  // 懒加载Home模块，内部路由由home-routing.module处理
  { path: 'home', loadChildren: './home/home.module#HomeModule' },
  // 懒加载User模块，内部路由由user-routing.module处理
  { path: 'user', loadChildren: './user/user.module#UserModule' },
  // 可选：404兜底路由
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthRedirectGuard, AuthService] // Angular 5需手动注册守卫和服务
})
export class AppRoutingModule {}

4. 配置Home模块的子路由 #

home-routing.module.ts里可以自由定义子路由结构：

// home-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserProfileComponent } from './user-profile/user-profile.component';

const routes: Routes = [
  { 
    path: '', // Home模块的根路由
    component: HomeComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent },
      { path: 'profile', component: UserProfileComponent },
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' } // 默认跳转到dashboard
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule {}

5. 配置User模块的子路由 #

参照Home模块，user-routing.module.ts配置自己的子路由：

// user-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

const routes: Routes = [
  { 
    path: '', // User模块的根路由
    component: UserComponent,
    children: [
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent },
      { path: '', redirectTo: 'login', pathMatch: 'full' } // 默认跳转到login
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule {}

额外提示：异步判断场景 #

如果你的AuthService判断方法是异步的（比如返回Observable<boolean>），只需调整守卫逻辑：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.authService.isQualifiedForHomeAsync().pipe(
    map(isQualified => {
      isQualified ? this.router.navigate(['/home']) : this.router.navigate(['/user']);
      return false;
    })
  );
}

这样配置后，用户访问根路径时，就会根据AuthService的条件自动跳转到对应模块，两个模块的子路由也能正常工作啦！

内容的提问来源于stack exchange，提问作者Mike Hawkins