web-dev-qa-db-fra.com

Angular > 4.3 & <5.2.3 - Intercepteur JWT - Jeton d'actualisation

Important Angular> 4.3 & <5.2.3

J'utilise HttpClient et je crée cet intercepteur pour ajouter le jeton jwt. Tout fonctionne parfaitement mais j'ai une mauvaise pratique. J'utilise Http à l'intérieur de l'intercepteur HttpClient. Si je change 

private http: Http,

à

private http: HttpClient

Je reçois cette erreur de cycle

Cannot instantiate cyclic dependency! InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]")

des idées comment puis-je le faire fonctionner?

import {Injectable} from "@angular/core";
import {HttpEvent, HttpHandler, HttpInterceptor} from "@angular/common/http";
import {HttpRequest} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import {Http} from "@angular/http";
import {SiteService} from "../services/site.service";
import {Router} from "@angular/router";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

constructor(
    private http: Http,
    private router: Router,
    private siteService: SiteService
) {}

refreshToken() {
    return this.http.get(this.siteService.apiDomain() + '/api/token?token=' + localStorage.getItem('JWToken'), {})
        .map((response: any) => {
            let data = response.json();
            return {
                token: data.token,
                permissions: data.permissions,
                user: data.user,
            };
        })
}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const clonedRequest = req.clone({
        headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('JWToken'))
    });

    return next.handle(clonedRequest).catch((res) => {

        if (res.status === 401 || res.status === 403) {
            return this.refreshToken().flatMap((data) => {
                if (data.token !== '') {
                    localStorage.setItem('currentUser', JSON.stringify(data.user));
                    localStorage.setItem('currentUserPermissions', JSON.stringify(data.permissions));
                    localStorage.setItem('JWToken', data.token);
                } else {
                    localStorage.removeItem('currentUser');
                    localStorage.removeItem('currentUserPermissions');
                    localStorage.removeItem('JWToken');
                    this.router.navigate(['./auth/login']);
                    return Observable.throw(res);
                }
                const clonedRequestRepeat = req.clone({
                    headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('JWToken'))
                });
                return next.handle(clonedRequestRepeat);
            })
        } else {
            return Observable.throw(res);
        }

    });

}
}

Une autre chose importante pour ceux qui utiliseront cet intercepteur pour leur projet, mais sans rapport avec le problème actuel, consiste à définir les en-têtes de la réponse du jeton d'actualisation au moins quelques secondes.

->header('Cache-Control', 'public, max-age=45')
->header('Expires', date('D, d M Y H:i:s ', time() + 45).'GMT');
angularangular-http-interceptors
8
Michalis

J'ai simplement résolu de ne pas définir authService dans le constructeur, mais d'entrer dans la fonction d'interception.

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Get the auth header from the service.
    const auth = this.inj.get(AuthenticationService);
    const authToken = auth.getAuthorizationToken();
    ...
}

Vous devez d'abord ajouter Injector à votre constructeur

constructor(
            ...
            private inj: Injector
) {}
8
Michalis

Vous pouvez également essayer un petit bidouillage pour instancier le service, comme:

constructor(private injector: Injector) {
  setTimeout(() => {
      this.loginService = this.injector.get(LoginService);
  })
}

De cette façon, vous n'obtiendrez pas l'erreur dépassée par la pile d'appels max.

1
Jayendra Bariya