Angular2: Resolving a cyclic dependency between Http intercepting factory and auth service

Question

I have the following auth service:

@Injectable()
export class AuthService {

  //...

  constructor(private http: Http, private router: Router) {
    //...
  }

  public login(username: string, password: string): Observable<boolean> {
    // perform login
  }

  public logout() {
    // perform cleanup
    this.router.navigateByUrl('/login');
  }
}

And the following Http interceptor factory:

@Injectable()
class MyHttpInterceptor extends Http {

  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private authService: AuthService) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return this.intercept(super.request(url, options));
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return this.intercept(super.get(url, options));
  }

  post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
  }

  put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
  }

  delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return this.intercept(super.delete(url, options));
  }

  getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
    if (options == null) {
      options = new RequestOptions();
    }
    if (options.headers == null) {
      options.headers = new Headers();
    }
    // add headers required by our backend
    return options;
  }

  intercept(observable: Observable<Response>): Observable<Response> {
    return observable.catch((err, source) => {
      if (err.status == 401) {
        this.authService.logout();
        return Observable.empty();
      } else {
        return Observable.throw(err);
      }
    });

  }
}

export function myHttpInterceptorFactory(backend: ConnectionBackend, options: RequestOptions, authService: AuthService): MyHttpInterceptor {
  return new MyHttpInterceptor(backend, options, authService);
}

Basically the requirement here is that if any response is ever received from the backend with status 401, the logout procedure should start.

The setup in App module is as follows:

@NgModule({
  imports: [
    HttpModule,
    //...
  ],
  declarations: [
    AppComponent,
    //...
  ],
  providers: [
    {
      provide: Http,
      useFactory: myHttpInterceptorFactory,
      deps: [XHRBackend, RequestOptions, AuthService]
    },
    AuthService,
    //...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

This creates a cyclic dependency error where the Http interceptor needs AuthService, but AuthService needs Http.

Error: Provider parse errors:
Cannot instantiate cyclic dependency! Http: in NgModule AppModule in ./AppModule

I tried using forwardRef to inject Http in AuthService, but that didn't change anything.

Any help on how to restructure would be great.

score 1 · Accepted Answer · answered May 26 '17 at 11:26

Basically the requirement here is that if any response is ever received from the backend with status 401, the logout procedure should start.

If the goal is to handle HTTP errors a specific way, this is what I would do: I would not extend the HTTP service, but rather create a base class for my services to extend that handle the repetitive HTTP functions such as extracting data or handling errors. It looks something like this:

import { Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

export class HttpServiceBase {
    constructor(private authSvc: AuthService ) { }

    extractData(res: Response) {
        const body = res.json();
        return body || {};
    }

    handleError(error: Response | any) {
        switch (error.status) {
            .... //other cases

            case 401:
               this.authSvc.logout();

            default:
                //default handling
        }

    }
}

Then use it like so:

@Injectable()
export class SomeService extends HttpServiceBase {

    constructor(
        authSvc: AuthService,
        private http: AuthHttp
    )
    {
        super(authSvc);
    }


    sampleCall() {
        return this.http.get(...)
            .map(this.extractData)
            .catch(this.handleError);
    }

}

This solves the cyclical dependency.

Hope that helps.

Thanks for the suggestion. Could you also give some examples of use cases for which it would it be proper extend the Http service instead? — Aakash Jain, May 27 '17 at 06:33
I have not come up with a real use case for _extending_ the Http service. Even if you want an equivalent to auto-attach JWTs or something, the natural path isn't to extend Http. If you look at https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts, the source code for AuthOs Angular2-JWT library, it instead uses already existing conventions and builds a _new_ service that uses Http functions such as `request` and requestOptionsArgs`. I'm not saying there will never be a use case for extending the Http class, but I have not come up with a legitimate use case yet. — Tyler Jennings, May 28 '17 at 12:36

Angular2: Resolving a cyclic dependency between Http intercepting factory and auth service

1 Answers1