用auth0s authguard配置角路由

Question

我想配置嵌套的懒惰加载路线，只有在用户登录时才可用。身份验证可与Auth0s一起使用，并且是相应的authguard。 因此，例如，我的路线看起来像这样：

const routes: Routes = [
  {
    path: ':id',
    children: [
      {
        path: '',
        children: [        {
            path: 'first-component',
            loadChildren: () => import('./first-component.module').then((m) => m.FirstComponentModule),
            canLoad: [AuthGuard],
          },
            {
            path: 'second-component',
            loadChildren: () => import('./second-component.module').then((m) => m.SecondComponentModule),
            canLoad: [AuthGuard],
          },
        
        ],
      },
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'first-component',
      },
    ],
  },
  {
    path: ':id',
    redirectTo: ':id',
    pathMatch: 'full',
  },
  {
    path: '**',
    component: PageNotFoundComponent,
  },
];

：ID < /code> paramter是需要的，应该保留在URL中，以便看起来像这样：

my-app/ID123/first-component

但是身份验证我被重定向到 /id123-＆gt;找不到

我想念什么？

Answer 1

警卫不应该是问题。

您可以尝试此简化的路由配置：

const routes: Routes = [
  {
    path: 'not-found',
    component: PageNotFoundComponent,
  },
  {
    path: ':id',
    canLoad: [AuthGuard],
    children: [
      {
        path: 'first-component',
        loadChildren: () => import('./first-component.module').then((m) => m.FirstComponentModule),
      },
      {
        path: 'second-component',
        loadChildren: () => import('./second-component.module').then((m) => m.SecondComponentModule),
      },
      {
        path: '**',
        pathMatch: 'full',
        redirectTo: 'first-component',
      },
    ],
  },
  {
    path: '**',
    redirectTo: 'not-found',
  },
];

如果此配置不起作用，请发送您的父路由配置。
这些问题可能存在。