Come scrivere l'intercettore http per AngularJS 2?

Question

Voglio controllare tutte le mie risposte http da un posto. Ad esempio lo stato di autenticazione. Se la risposta dice che l'utente non è più autenticato, desidero reindirizzare o qualcos'altro. C'è un modo per farlo.

Answer 1

Eccoci

Creare un servizio del genere

export const JWT_RESPONSE_HEADER = 'X-Auth-Token'; 

@Injectable() 
export class AuthHttp extends Http { 
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { 
    super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    const request = super.request(url, this.appendAuthHeader(options)); 
    request.map(this.saveToken); 
    return request; 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    const request = super.get(url, this.appendAuthHeader(options)); 
    request.map(this.saveToken); 
    return request; 
    } 

    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> { 
    const request = super.post(url, body, this.appendAuthHeader(options)); 
    request.map(this.saveToken); 
    return request; 
    } 

    put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> { 
    const request = super.put(url, body, this.appendAuthHeader(options)); 
    request.subscribe(this.saveToken); 
    return request; 
    } 

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    const request = super.delete(url, this.appendAuthHeader(options)); 
    request.map(this.saveToken); 
    return request; 
    } 

    private appendAuthHeader(options?: RequestOptionsArgs): RequestOptionsArgs { 
    let mergedOptions: RequestOptionsArgs; 
    if (!options) { 
     mergedOptions = { headers: new Headers() }; 
    } else { 
     mergedOptions = options; 
    } 
    const token = localStorage.getItem(JWT_RESPONSE_HEADER); 
    const isTokenSet = mergedOptions.headers.has('Authorization'); 
    if (token && !isTokenSet) mergedOptions.headers.append('Authorization', `Bearer ${token}`); 
    return mergedOptions; 
    } 

    private saveToken(res: Response): void { 
    const token = res.headers.get(JWT_RESPONSE_HEADER); 
    if (token) localStorage.setItem(JWT_RESPONSE_HEADER, token); 
    } 
} 

e includerlo in voi app.module.ts come questo

@NgModule({ 
    imports: [ 
     BrowserModule, 
     ContentModule, 
     routing, 
     HttpModule 
    ], 
    declarations: [ 
     AppComponent, 
     LoginComponent 
    ], 
    providers: [ 
     appRoutingProviders, 
     LoginService, 
     { 
      provide: Http, 
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new AuthHttp(backend, defaultOptions), 
      deps: [XHRBackend, RequestOptions] 
     } 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

non dovete apportare modifiche per il tuo altro servizio strega usa http

https://github.com/mtinner/CAS-FEE_Project2/blob/develop/src/frontend/components/common/authentication/auth-http.service.ts

https://github.com/mtinner/CAS-FEE_Project2/blob/ebab26fb8a8463cf9f65c3bc9e4d806d665bec7e/src/frontend/components/app.module.ts

Answer 2

anche dalla versione 4.3 di angolare è possibile utilizzare HttpInterceptor. Maggiori informazioni dalla documentazione ufficiale sono qui HttpInterceptor.

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

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    request = request.clone({ 
    setHeaders: {Authorization: `Bearer ${this.auth.getToken()}`} 
    }); 

    return next.handle(request); 
    } 
}