Angular2:向AuthGuard注入服务会中断对其他服务的注入

时间:2017-06-18 21:39:39

标签: angular service dependency-injection

开始一个新项目,我带了一些我的服务。

  • 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中的依赖性解决错误,等等。

关于什么错误的想法在这里错了?

更新 因此,似乎导入和/或注入服务的顺序在此问题中起作用。虽然我不确定究竟是怎么回事。

1 个答案:

答案 0 :(得分:1)

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

整个DI混乱是由Http注入UserService引起的。因此,我将UserService拆分为CurrentUserService,只关注存储当前用户(这是AuthService所需的内容等)和UserService使用Http 1}}发布并从BE获取用户。

这显然是一个更好,更分散的服务组织,虽然我仍然不明白究竟是什么导致了这个问题(毕竟它在我的上一个项目中有效)。

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