कोणीय 4.3 इंटरसेप्टर - उपयोग कैसे करें?

Question

मैं एक नया ऐप बनाने की प्रक्रिया में हूं जिसके लिए प्राधिकरण शीर्षलेख की आवश्यकता है। आम तौर पर मैं इस scotch.io article में मिले दृष्टिकोण के समान कुछ उपयोग करता हूं। लेकिन यह मेरे ध्यान में आया है कि HTTP इंटरसेप्टर अब नए एचटीपी क्लाइंट मॉड्यूल के माध्यम से कोणीय 4 पारिस्थितिकी तंत्र के भीतर पूरी तरह से समर्थित हैं और मैं कुछ दस्तावेज खोजने का प्रयास कर रहा हूं कि उन्हें वास्तव में कैसे उपयोग किया जाए।

यदि मैं गलत हूं (4.3 के रूप में) यह प्राधिकरण शीर्षकों को इंजेक्शन देने का सबसे अच्छा अभ्यास है, तो मैं सुझावों के लिए भी खुलेगा। मेरी सोच यह थी कि यह हाल ही में एक सुविधा जोड़ा गया जिसका मतलब है कि "कोणीय स्वीकृत" विधि में माइग्रेट करने का शायद एक अच्छा कारण है।

Answer 1

यह उत्तर कोडवायरियर द्वारा official documentation से जुड़ा हुआ है। , आप के साथ अनुरोध क्लोन कर सकते हैं

import {NgModule} from '@angular/core'; 
import {HTTP_INTERCEPTORS} from '@angular/common/http'; 

@NgModule({ 
    providers: [{ 
    provide: HTTP_INTERCEPTORS, 
    useClass: NoopInterceptor, 
    multi: true, 
    }], 
}) 
export class AppModule {} 

एक प्राधिकरण हैडर जोड़ने के लिए:

import {Injectable} from '@angular/core'; 
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http'; 

@Injectable() 
export class NoopInterceptor implements HttpInterceptor { 
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    return next.handle(req); 
    } 
} 

जो आप तो इतनी तरह से अपने ऐप्लिकेशन में एकीकृत कर सकते हैं:

कोणीय आप एक HttpInterceptor बनाने की अनुमति देता बदले गए हेडर:

import {Injectable} from '@angular/core'; 
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http'; 

@Injectable() 
export class AuthInterceptor implements HttpInterceptor { 
    constructor(private auth: AuthService) {} 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    // Get the auth header from the service. 
    const authHeader = this.auth.getAuthorizationHeader(); 
    // Clone the request to add the new header. 
    const authReq = req.clone({headers: req.headers.set('Authorization', authHeader)}); 
    // Pass on the cloned request instead of the original request. 
    return next.handle(authReq); 
    } 
} 

ध्यान दें कि इंटरसेप्टर चाई की तरह कार्य करते हैं n, ताकि आप विभिन्न कार्यों को करने के लिए एकाधिक इंटरसेप्टर सेट कर सकें। इंटरसेप्टर के निर्माता को

Answer 2

इंजेक्शन AuthService मुझे इस त्रुटि दे रहा था:

Uncaught Error: Provider parse errors: Cannot instantiate cyclic dependency! InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

निर्माता को यह इंजेक्शन लगाने के बजाय, मैं @angular/core की Injector का इस्तेमाल किया और यह ठीक काम किया। मैं localStorage में टोकन संग्रहीत कर रहा हूं और मूल ऑथ का उपयोग कर रहा हूं।

token.interceptor.ts

import {Injectable, Injector} from '@angular/core'; 

import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http'; 
import {Observable} from 'rxjs/Observable'; 
import {AuthService} from './auth.service'; 

@Injectable() 
export class TokenInterceptor implements HttpInterceptor { 

    constructor(private injector: Injector) { } 

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

     const auth = this.injector.get(AuthService); 
     if (auth.getToken()) { 
      request = request.clone({ 
       setHeaders: { 
        Authorization: `Bearer ${auth.getToken()}` 
       } 
      }); 

     } 

     return next.handle(request); 
    } 
} 

AuthService में getToken समारोह

: मैं स्थापित करने के लिए

Authorization: 'Bearer token_string' 

यहाँ मैं कैसे लागू किया है है की जरूरत है

यहां आप हेडर या केवल टोकन प्राप्त करने के लिए संपूर्ण तर्क लागू कर सकते हैं। यहां मेरे मामले में, मैं केवल जेडब्ल्यूटी टोकन स्ट्रिंग प्राप्त करने के लिए इसे बुला रहा हूं।

/** 
* Get jwt token 
* @returns {string} 
*/ 
getToken(): string { 
    return localStorage.getItem('token'); 
} 

app.module.ts

आयात TokenInterceptor

import {TokenInterceptor} from './pathToTheFile/token.interceptor'; 

providers: सरणी में @NgModule के अंतर्गत निम्नलिखित जोड़ें।

providers: [ 
    { 
     provide: HTTP_INTERCEPTORS, 
     useClass: TokenInterceptor, 
     multi: true 
    } 
    //, other providers 
]