javascript - Angular 2 - Cannot instantiate cyclic dependency - Stack Overflow

admin 管理员组

文章数量: 1086019

I create custom XHRBackend class to catch 401 error globally. In AuthService I have 2 methods which use http - login and refreshToken. So i have dependency chain like that: Http -> customXHRBackend -> AuthService -> Http. How can I fix this?

export class CustomXHRBackend extends XHRBackend {
  constructor(browserXHR: BrowserXhr,
              baseResponseOptions: ResponseOptions,
              xsrfStrategy: XSRFStrategy,
              private router: Router,
              private authService: AuthService) {
    super(browserXHR, baseResponseOptions, xsrfStrategy);
  }

  createConnection(request: Request): XHRConnection {
    let connection: XHRConnection = super.createConnection(request);
    connection.response = connection.response
      .catch(this.handleError.bind(this));

    return connection;
  }

  handleError(error: Response | any) {
    console.log('ERROR',error['status']);
    if(error['status'] === 401) {
      this.authService.logout();
      this.router.navigate(['/']);
    }

    return Observable.throw(error);
  }
}

AuthService.ts

@Injectable()
export class AuthService {
  private loggedIn: boolean = false;

  constructor(private http: Http) {
    this.loggedIn = !!localStorage.getItem('authToken');
  }

  login(email: string, password: string): Observable<Response> {
    let headers: Headers = new Headers();
    headers.set('Content-Type', 'application/json');

    return this.http.post('',
      {
        email: email,
        password: password
      },
      {
        headers: headers
      })
      .map((response) => {
        let res = response.json();

        // if (res['success']) {
        if (res) {
          localStorage.setItem('authToken', res['token']);
          localStorage.setItem('refreshToken', res['refreshToken']);
          console.log('logged');
          this.loggedIn = true;
        }

        return response;
      }
    );
  }

  logout(): void {
    localStorage.removeItem('authToken');
    this.loggedIn = false;

    console.log('Logged out');
  }

  isLogged(): boolean {
    return this.loggedIn;
  }

  refreshToken(): Observable<Response> {
    let headers: Headers = new Headers();
    headers.set('token', localStorage.getItem('token'));
    headers.set('refreshToken', localStorage.getItem('refreshToken'));

    return this.http.get('', {
      headers: headers
    });
  }

}

Include CustomXHRBackend in app.module.ts

{
      provide: XHRBackend,
      useFactory: (browserXHR: BrowserXhr,
                   baseResponseOptions: ResponseOptions,
                   xsrfStrategy: XSRFStrategy,
                   router: Router,
                   authService: AuthService) => {
        return new CustomXHRBackend(browserXHR, baseResponseOptions, xsrfStrategy, router, authService);
      },
      deps: [BrowserXhr, ResponseOptions, XSRFStrategy, Router, AuthService]
    }

I create custom XHRBackend class to catch 401 error globally. In AuthService I have 2 methods which use http - login and refreshToken. So i have dependency chain like that: Http -> customXHRBackend -> AuthService -> Http. How can I fix this?

export class CustomXHRBackend extends XHRBackend {
  constructor(browserXHR: BrowserXhr,
              baseResponseOptions: ResponseOptions,
              xsrfStrategy: XSRFStrategy,
              private router: Router,
              private authService: AuthService) {
    super(browserXHR, baseResponseOptions, xsrfStrategy);
  }

  createConnection(request: Request): XHRConnection {
    let connection: XHRConnection = super.createConnection(request);
    connection.response = connection.response
      .catch(this.handleError.bind(this));

    return connection;
  }

  handleError(error: Response | any) {
    console.log('ERROR',error['status']);
    if(error['status'] === 401) {
      this.authService.logout();
      this.router.navigate(['/']);
    }

    return Observable.throw(error);
  }
}

AuthService.ts

@Injectable()
export class AuthService {
  private loggedIn: boolean = false;

  constructor(private http: Http) {
    this.loggedIn = !!localStorage.getItem('authToken');
  }

  login(email: string, password: string): Observable<Response> {
    let headers: Headers = new Headers();
    headers.set('Content-Type', 'application/json');

    return this.http.post('https://httpbin/post',
      {
        email: email,
        password: password
      },
      {
        headers: headers
      })
      .map((response) => {
        let res = response.json();

        // if (res['success']) {
        if (res) {
          localStorage.setItem('authToken', res['token']);
          localStorage.setItem('refreshToken', res['refreshToken']);
          console.log('logged');
          this.loggedIn = true;
        }

        return response;
      }
    );
  }

  logout(): void {
    localStorage.removeItem('authToken');
    this.loggedIn = false;

    console.log('Logged out');
  }

  isLogged(): boolean {
    return this.loggedIn;
  }

  refreshToken(): Observable<Response> {
    let headers: Headers = new Headers();
    headers.set('token', localStorage.getItem('token'));
    headers.set('refreshToken', localStorage.getItem('refreshToken'));

    return this.http.get('https://httpbin/get', {
      headers: headers
    });
  }

}

Include CustomXHRBackend in app.module.ts

{
      provide: XHRBackend,
      useFactory: (browserXHR: BrowserXhr,
                   baseResponseOptions: ResponseOptions,
                   xsrfStrategy: XSRFStrategy,
                   router: Router,
                   authService: AuthService) => {
        return new CustomXHRBackend(browserXHR, baseResponseOptions, xsrfStrategy, router, authService);
      },
      deps: [BrowserXhr, ResponseOptions, XSRFStrategy, Router, AuthService]
    }

• javascript
• http
• angular
• typescript
• dependency-injection

Share Improve this question Follow edited Dec 20, 2016 at 14:15 Eran Shabi 15.1k88 gold badges3333 silver badges5151 bronze badges asked Dec 20, 2016 at 13:23 baidariobaidario 24933 silver badges88 bronze badges 8

• Check this stackoverflow./questions/40525850/… – yurzui Commented Dec 20, 2016 at 13:31
• I saw that answer, but maybe there is better way than use setTimeout – baidario Commented Dec 20, 2016 at 13:34
• stackoverflow./questions/40826073/… – yurzui Commented Dec 20, 2016 at 13:36
• I don't think you should use AuthService in your CustomXHRBackend, as XHRBackend is lower level than your AuthService. That looks like an anti-pattern, even if it's convenient to handle errors only once, if there is a solution it might be a bit "hacky". – n00dl3 Commented Dec 20, 2016 at 13:39
• 1 So what about the answer in the first ment? (or stackoverflow./questions/40860202/…) – Günter Zöchbauer Commented Dec 20, 2016 at 14:17

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 1

How about HTTP Interceptors... There's a blog post here.
If you Google you'll find more... Here's how you hook one into you App Module you can clone the request in you interceptor and add X-CustomAuthHeader into headers etc.

Please see in your constructor where you inject dependency. You can't inject in a few Services the same dependency.Example: CustomXHRBackend => AuthService, AuthService => CustomXHRBackend

本文标签： javascriptAngular 2Cannot instantiate cyclic dependencyStack Overflow