Angular懒加载场景下登录跳转/admin空白页问题排查与解决

你遇到的登录后跳转/admin页面空白的核心原因是路由配置重复嵌套：

在app-routing.module.ts中，你已经将/admin路径指向懒加载的AdminModule，但在admin-routing.module.ts里又定义了顶层路径为admin，这会导致实际需要匹配的路径变成/admin/admin，而你跳转的是/admin，所以没有对应的组件渲染，页面空白。

具体修改步骤 #

1. 修正admin-routing.module.ts的路由配置 #

将AdminRoutingModule中的顶层路由路径改为''，让它继承app-routing中定义的/admin路径：

const adminRoutes: Routes = [
  {
    path: '', // 从'admin'改为''
    component: AdminLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: '', redirectTo: 'brand-list', pathMatch: 'full' },
      { path: 'brand-list', component: BrandListComponent },
      { path: 'category-list/:brandId', component: CategoryListComponent },
      { path: 'add-category', component: AddCategoryComponent },
      { path: 'edit-category/:id', component: EditCategoryDialogComponent },
      { path: 'edit-subcategory/:id', component: EditSubcategoryDialogComponent },
      { path: 'subcategory-list', component: SubcategoryListComponent },
      { path: 'bycategory/:id', component: SubcategoryListComponent },
      { path: 'products/:subcategoryId', component: ProductListComponent },
      { path: 'product/:id', component: ProductPageComponent },
      { path: '**', redirectTo: 'brand-list' }
    ]
  }
];

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

2. 验证AuthGuard的正确性 #

确保你的AuthGuard服务中canActivate方法正确判断用户已登录状态，比如检查本地存储的认证信息或AuthService中的登录状态：

// 示例AuthGuard实现
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.isLoggedIn()) { // 确保isLoggedIn方法正确返回登录状态
      return true;
    }
    return this.router.createUrlTree(['/login']);
  }
}

3. 确认AdminModule的导入配置 #

确保AdminModule中正确导入了AdminRoutingModule，并且声明了所有用到的组件（比如AdminLayoutComponent、BrandListComponent等）。

完成以上修改后，登录成功跳转/admin时，路由会正确匹配到AdminLayoutComponent，并自动重定向到/admin/brand-list，页面就能正常显示内容了。

内容的提问来源于stack exchange，提问作者Kamal Chehade