कोणीय> 4.3 और <5.2.3 - जेडब्ल्यूटी इंटरसेप्टर - ताज़ा टोकन

Question

महत्वपूर्ण कोणीय> 4,3 & < 5.2.3

मैं HttpClient का उपयोग करें और मैं जेडब्ल्यूटी टोकन जोड़ने के लिए इस इंटरसेप्टर पैदा करते हैं। हर काम सही काम करता है लेकिन मेरे पास एक बुरा अभ्यास है। मैं एचटीपी क्लाइंट इंटरसेप्टर के अंदर एचटीपी का उपयोग करता हूं। अगर मैं

private http: Http, 

बदलने

private http: HttpClient 

को मैं इस चक्र त्रुटि

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

किसी भी विचार कैसे मैं यह काम कर सकते हैं मिल सकता है?

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

    }); 

} 
} 

अन्य महत्वपूर्ण बात यह वर्तमान समस्या के लिए जो लोग अपने परियोजना के लिए इस इंटरसेप्टर का उपयोग करेगा लेकिन अप्रासंगिक के लिए ताज़ा टोकन प्रतिक्रिया कम से कम कुछ सेकंड के लिए हेडर स्थापित करने के लिए है।

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

Answer 1

मैंने बस कन्स्ट्रक्टर में authService स्थापित करने का संकल्प नहीं किया लेकिन इंटरसेप्ट फ़ंक्शन में शामिल किया।

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, सेवा instatiate करने के लिए अपने निर्माता को इंजेक्टर जोड़ने के लिए पहले

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

Answer 2

तुम भी एक छोटे से हैक की कोशिश कर सकते है जैसे:

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

इस तरह आप नहीं होगा अधिकतम कॉल स्टैक त्रुटि से अधिक हो जाओ।