JHipster 4.13单体应用导航异常：系统管理页面无法访问

Hey，我来帮你拆解下这个问题～从你给出的路由日志和代码来看，问题主要出在路由配置遗漏了管理页面规则和路由数组合并错误这两个地方：

原因分析 #

1. 管理页面路由未被纳入HomeLayout的子路由
   你当前的APP_ROUTE配置中，HomeLayoutComponent的children数组只包含了home路径，但JHipster默认生成的jhi-metrics、jhi-health等管理页面路由，原本是挂载在HomeLayout下的。现在这些路由规则被遗漏，导致访问时路由无法匹配到对应的组件，最终被重定向到home页面（从日志里的urlAfterRedirects: '/home'也能看出来）。

2. 路由数组合并未生效
   在app-routing.module.ts里，你写了一行[ APP_ROUTE, navbarRoute, ...errorRoute ];但这行代码没有赋值给LAYOUT_ROUTES，实际上LAYOUT_ROUTES只等于APP_ROUTE。这就导致默认的错误路由、导航栏路由，以及管理页面路由都没有被加载到应用中，自然无法访问这些页面。

另外还有个小细节：你LoginLayout下的reset路径绑定的是RegisterComponent，这应该是笔误，应该改成ResetComponent，不然重置密码页面会显示注册组件哦。

解决方案 #

步骤1：补全HomeLayout的管理页面子路由 #

修改app.route.ts，把JHipster默认生成的管理页面路由加入HomeLayout的children数组中：

// 确保已经导入了这些管理路由（如果没有，需要手动导入）
import { metricsRoute, healthRoute, configurationRoute, auditsRoute, logsRoute } from './';

export const APP_ROUTE: Routes = [
  {
    path: '',
    component: HomeLayoutComponent,
    data: { authorities: ['ROLE_USER'], pageTitle: 'home.title' },
    canActivate: [ UserRouteAccessService ],
    children: [
      { path: '', component: NavbarComponent, outlet: 'navbar' },
      { path: 'home', component: HomeComponent },
      // 加入管理页面路由
      ...metricsRoute,
      ...healthRoute,
      ...configurationRoute,
      ...auditsRoute,
      ...logsRoute
    ]
  },
  {
    path: '',
    component: LoginLayoutComponent,
    children: [
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent },
      { path: 'reset', component: ResetComponent }, // 修正笔误
    ]
  },
  { path: '**', redirectTo: 'home', pathMatch: 'full' },
];

步骤2：修复路由数组合并逻辑 #

修改app-routing.module.ts，确保所有路由都被正确合并到LAYOUT_ROUTES中：

// 导入所有需要的路由
import { APP_ROUTE } from './app.route';
import { navbarRoute } from './layouts/navbar/navbar.route';
import { errorRoute } from './layouts/error/error.route';
import { metricsRoute, healthRoute, configurationRoute, auditsRoute, logsRoute } from './';

// 合并所有路由数组
const LAYOUT_ROUTES = [...APP_ROUTE, ...navbarRoute, ...errorRoute];

@NgModule({
  imports: [ RouterModule.forRoot(LAYOUT_ROUTES, { useHash: true, enableTracing: true }) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

补充说明 #

• 管理页面默认需要ROLE_ADMIN权限，如果你用普通用户登录访问，可能会被拦截，记得用拥有管理员权限的账号测试。
• 测试时直接访问/home/jhi-metrics（或其他管理页面路径），就能正常进入对应的页面了。

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