使用 Auth0s AuthGuard 配置 Angular 路由

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 参数，并且应该保留在 url 中，因此它应该如下所示：

my-app/ID123/first-component

但是身份验证我被重定向到 /ID123 -> 未找到

我错过了什么？

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',
  },
];

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

使用 Auth0s AuthGuard 配置 Angular 路由

Configure Angular Routes with Auth0s AuthGuard

angular-ui-router

auth0

ngrx

angular