Angular2：对 AuthGuard 的服务注入会破坏对其他服务的注入答案

【问题标题】：Angular2: Service injection into AuthGuard breaks injection into other servicesAngular2：对 AuthGuard 的服务注入会破坏对其他服务的注入
【发布时间】：2017-11-21 00:48:42
【问题描述】：

开始一个新项目，我带着我的一些服务。

TokenService 使用 UserService 来检查令牌，
UserService 发布并存储当前用户，
AuthService 使用 TokenService 和 UserService 提供 http 头
Api 使用 AuthService 获取 http 头

这些服务在我上一个项目中运行良好，似乎没有任何循环依赖。

在我的新项目中，我需要一个 AuthGuard，它还可以注入 UserService。一旦我将 UserService 添加到 AuthGuard 的构造函数中，Angular 就无法将 UserService 解析为我的其他服务中的依赖项。没有注入 AuthGuard 一切正常。

由于这似乎不仅发生在 UserService 上，而且例如发生在 AuthService 上，我猜测我的问题不是来自服务，而是来自提供服务的方式。

app.module.ts

import { App } from './app.component';
import { AppState, InternalStateType } from './app.service';
import { GlobalState } from './global.state';
import { NgaModule } from './theme/nga.module';
import { PagesModule } from './pages/pages.module';
import {UserService} from "./services/user.service";
import {DefaultGuard} from "./pages/default.guard";
import {AuthService} from "./services/auth.service";
import {TokenService} from "./services/token.service";
import {Api} from "./services/api.service";

// Application wide providers
const APP_PROVIDERS = [
  AppState,
  GlobalState,
  UserService,
  DefaultGuard,
  AuthService,
  TokenService,
  Api
];

@NgModule({
  bootstrap: [App],
  declarations: [
    App,
  ],
  entryComponents: [
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    HttpModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgaModule.forRoot(),
    NgbModule.forRoot(),
    PagesModule,
    routing
  ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    APP_PROVIDERS
  ]
})

export class AppModule {

  constructor(public appState: AppState) {
  }
}

pages.module.ts

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { routing }       from './pages.routing';
import { NgaModule } from '../theme/nga.module';
import { AppTranslationModule } from '../app.translation.module';
import { Pages } from './pages.component';

@NgModule({
  imports: [CommonModule, AppTranslationModule, NgaModule, routing],
  declarations: [Pages],
})
export class PagesModule {
}

AuthGuard default.guard.ts 在属于 pages.module.ts 的路由器中使用

import {Injectable, Inject} from "@angular/core";
import {CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
import {UserService} from "../services/user.service";

@Injectable()
export class DefaultGuard implements CanActivate {

  constructor(
    private router: Router,
    public userService: UserService
  ) {}

  public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (!this.userService.isAdminUser()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

我的服务的依赖：

user.service.ts

constructor(
    private http: Http,
  ) {
  }

api.service.ts

constructor(
    private http: Http,
    private auth: AuthService,
  ) {
  }

auth.service.ts

constructor(
    public userService: UserService,
    private tokenService: TokenService,
    private http: Http,
  ) {}

token.service.ts

constructor(
    public userService: UserService
  ) {
  }

回顾一下：在我将 UserService 注入 DefaultGuard 之前，一切正常。将 UserService 注入 DefaultGuard 会导致 TokenService 中出现依赖关系解析错误。将 AuthService 注入 DefaultGuard 会导致 ApiService 中的依赖关系解析错误等。

你有什么想法吗？

更新因此，导入和/或注入服务的顺序似乎在此问题中起作用。虽然我不确定具体是怎样的。

【问题讨论】：

标签： angular service dependency-injection

【解决方案1】：

我找到了解决我特定问题的方法：

整个 DI 混乱是由 Http 注入 UserService 造成的。所以我将UserService 拆分为CurrentUserService，它只负责存储当前用户（这就是AuthService 等所需要的）和UserService，它使用Http 发布并从BE 获取用户。

这显然是一个更好、更独立的服务组织，尽管我仍然不明白究竟是什么导致了问题（毕竟它在我的上一个项目中起作用）。

值得一提的是，我正在使用ng2-admin template 来构建应用程序。也许在后台某处还有其他依赖项。

【讨论】：