如何为 Angular 16+ 中延迟加载的组件实现 Guard

Question

我正在尝试为延迟加载的组件实现守卫。我尝试过 canMatch 和 canActivate，但出现错误。

无法匹配任何路线。网址段： “admin/home/all-users/658044f87bfc4f8d999c9464”错误：NG04002：无法 匹配任何路线。

当我尝试canActivateChild时。我能够根据需要访问该页面，但没有看到任何表明 Guard 正在激活的迹象。

我的路线如下：

应用程序路由.module.ts

 const routes: Routes = [
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'dashboard/:id',
    canActivate: [authGuard],
    component: DashboardComponent,
  },
  { path: 'view', canActivate: [authGuard], component: ChatviewComponent },
  {
    path: 'group/:id',
    canActivate: [authGuard],
    component: GroupChatComponent,
  },
  {
    path: 'publichats/:id',
    canActivate: [authGuard],
    component: PublicChatsComponent,
  },
  {
    path: 'announcement/:id',
    canActivate: [authGuard],
    component: AnnouncementsComponent,
  },
  {
    path: '',
    children: [
      {
        path: 'admin',
        loadChildren: () =>
          import('./Admin/admin.module').then((mod) => mod.AdminModule),
      },
    ],
  },
];

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

这是这里使用的 Guard。

authgaurd.guard.ts

import { CanActivateFn, Router } from '@angular/router';

export const authGuard: CanActivateFn = (route, state) => {
  const routes:Router = new Router()
  const isAuth = localStorage.getItem("isAuthenticated");
  if (isAuth!==null){
    return true;
  }

  else{
    routes.navigate([''])
    return false;
  }

};

这些是子组件的路由：

admin-routing.module.ts

const routes: Routes = [
  {
    path:'header',
    component: HeaderBarComponent,
  },
  {
    path: 'login',
    component: AdminLoginComponent,
  },
  {
    path: 'dashboard/:id',
    component: DashComponent,
    canMatch:[authAdminGuard]
    // canActivate: [authAdminGuard]
  },

  {
    path: '',
    children: [
      {
        path: 'home',
        loadChildren: () =>
          import('./HomeComponents/home.module').then((mod) => mod.HomeModule),

      },
    ],
  },


];

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

home-routing.module.ts

const routes: Routes = [


  {
    path:'public-groups/:id',
    component:GroupsComponent,
    canMatch:[authAdminGuard]
  },
  {
    path:'all-users/:id',
    component:UsersComponent,
    canMatch:[authAdminGuard]
  },
  {
    path:'broadcast-channel/:id',
    component:BroadcastComponent,
    canMatch:[authAdminGuard]
  },
  {
    path:'user-profile/:id',
    component:UserProfileComponent,
    canMatch:[authAdminGuard]
  },
];

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

我打算使用的守卫如下：

authguard.guard.ts

import { CanActivateFn, Router } from '@angular/router';

export const authAdminGuard: CanActivateFn = (route, state) => {
  const routes:Router = new Router()
  const isAuth = localStorage.getItem("isAdminAuthenticated");
  if (isAuth)
      return true;
  else{
    routes.navigate(['/admin/login'])
    return false;
  }

};

有人可以解释一下出了什么问题吗？

Answer 1

尝试更新

app-routing.module.ts

和

admin-routing.ts

的路线变量。

对于

app-routing.module.ts

 const routes: Routes = [
   //...
   {
     path: 'admin',
     loadChildren: () =>
     import('./Admin/admin.module').then((mod) => mod.AdminModule),
   },
   {
     path: '',
     redirectTo: 'admin',
     pathMatch: 'full'
   }
];

对于

admin-routing.ts

const routes: Routes = [
  //...
  {
    path: '',
    loadChildren: () =>
    import('./HomeComponents/home.module').then((mod) => mod.HomeModule),
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  }

];

这应该可以解决您的问题。