將CanActivate與LazyLoaded模塊和Injectable一起使用

Question

我的網站的管理和用戶部分都使用了身份驗證服務，但是連接到后端API上的不同端點。 我正在使用工廠根據加載的模塊（管理員與用戶）提供不同的服務。

但是，當我嘗試創建AuthGuard服務並注入AuthService時，當路由器調用CanActivate時，它始終會生成AuthService的單獨實例。 路由器是否以某種方式在延遲加載模塊的范圍之外工作，這就是為什么它生成一個新實例？

auth.provider.ts

let AuthFactory = (
    http: Http,
    router: Router,
    storageService: StorageService,
    modalService: NgbModal,
    isAdmin: boolean
  ) => {
  return new AuthService(http, router, storageService, modalService, isAdmin);
};

export let AuthProvider = {
  provide: AuthService,
  useFactory: AuthFactory,
  deps: [ Http, Router, StorageService, NgbModal, IS_ADMIN ]
};

app.routing.ts

const appRoutes: Routes = [
  {
    path: 'mgmt',
    loadChildren: 'app/admin/admin.module'
  },
  { path: '',
    loadChildren: 'app/users/users.module'
  },
  { path: '**',
    redirectTo: ''
  }
];
@NgModule({
  imports: [ RouterModule.forRoot(appRoutes)],
  exports: [ RouterModule ]
})

export class AppRoutingModule {}

admin.routing.ts

RouterModule.forRoot(appRoutes);

const routes: Routes = [
  { path: '',
    component: AdminComponent,
    children: [
      {
        path: '',
        component: DashboardComponent,
        canActivate: [AuthGuard],
      {
        path: '**',
        redirectTo: ''
      }
    ]
  }
];

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

export class AdminRoutingModule {}

AUTH-guard.service.ts

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService,
              private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.authService.authenticated()
      .map(authenticated => {
        if (authenticated) {
          return true;
        } else {
          // do some other things
          return false;
        }
      })
      .take(1);
  }
}

Answer 1

由於每次都使用AuthFactory，因此每次都在構造一個新的AuthProvider。 您應該轉到“單一”設計模式，在該模式下，工廠提供了構造函數，然后getter方法返回現有的AuthProvider或新的AuthProvider（如果尚不存在）。 這樣，您將始終引用該對象的單個實例。

查看有關在javascript中實現單例的大量資源。