góc> 4.3 & <5.2.3 - JWT Interceptor - Refresh Mã

Question

quan trọng kiễu góc> 4,3 & < 5.2.3

tôi sử dụng HttpClient và tôi có thể tạo đánh chặn này để thêm token JWT. Everyting làm việc hoàn hảo nhưng tôi có một thực hành xấu. Tôi sử dụng Http bên trong Interceptor HttpClient. Nếu tôi thay đổi

private http: Http, 

để

private http: HttpClient 

tôi có được điều này lỗi chu kỳ

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

bất kỳ ý tưởng làm thế nào tôi có thể làm cho nó hoạt động?

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); 
     } 

    }); 

} 
} 

Điều quan trọng khác đối với những người sẽ sử dụng trình chặn này cho dự án của họ nhưng không liên quan đến vấn đề hiện tại là đặt tiêu đề cho phản hồi mã thông báo làm mới ít nhất một vài giây.

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

Answer 1

Tôi đã giải quyết đơn giản là không đặt authService trong hàm tạo nhưng nhận được chức năng chặn.

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(); 
    ... 
} 

Hou phải thêm Injector để constructor của bạn đầu tiên

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

Answer 2

Bạn cũng có thể thử một ít hack để instatiate các dịch vụ, như:

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

Bằng cách này bạn sẽ không nhận được lỗi cuộc gọi tối đa đã vượt quá lỗi.