小编jos*_*eme的帖子

如何通过 DI 使用 Angular 16 中最新的 CanActivateFn？

最近的 Angular 16 使用函数而不是类来实现 canactivate 功能。这是我下面的代码。如何添加通常位于函数构造函数中的 DI？

CanActivateFn函数代码：

export const authGuard: CanActivateFn = (
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  return inject(TokenService).authenticated.pipe(
    take(1),
    map((status) => {
      console.log('auth status: ', status);
      if (!status) {
        return inject(Router).createUrlTree(['/login']);
      }
      return true;
    })
  );
};

路线设置：

const routes: Routes = [
  {
    path: '',
    component: DefaultComponent,
    canActivate: [authGuard],
    children: [
      {
        path: '',
        component: DashboardComponent,
        data: { title: 'My Dashboard' },
      },
]