각도 4의 모든 HTTP 요청에 대한 전역 인증 헤더 만들기

Question

api에서 무언가를 얻으면 인증 헤더를 반복해서 선언하지 않도록하고 싶습니다.

API에서 데이터를 가져올 때마다 인증 헤더를 첨부해야합니다.

auth.service.ts

import { Injectable } from '@angular/core'; 
import { HttpClient, HttpHeaders } from '@angular/common/http'; 
import 'rxjs/add/operator/map'; 
import { AppSettings } from '../app.constants'; 


@Injectable() 
export class AuthService { 
    private loggedIn = false; 

    constructor(private httpClient: HttpClient) { 
    } 

    loginUser(email: string, password: string) { 
    const headers = new HttpHeaders() 
    .set('Content-Type', 'application/json'); 

    return this.httpClient 
    .post(
     GLOBAL_URL.LOGIN_URL + '/auth/login', 
     JSON.stringify({ email, password }), 
     { headers: headers } 
    ) 
    .map(
     (response: any) => { 
     localStorage.setItem('auth_token', response.token); 
      this.loggedIn = true; 
      return response; 
     }); 
    } 

    isLoggedIn() { 
     if (localStorage.getItem('auth_token')) { 
     return this.loggedIn = true; 
     } 
    } 

    logout() { 
    localStorage.removeItem('auth_token'); 
    this.loggedIn = false; 
    } 

products.service.ts

import { Injectable } from '@angular/core'; 
import { HttpClient, HttpHeaders} from '@angular/common/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/observable/of'; 
import{ GloablSettings } from '../global.constants'; 

@Injectable() 
export class SettingsService { 
    settingslist: any; 
    settings: any; 

    constructor(private httpClient: HttpClient) {} 

    getSettings(){ 
    if(this.settingslist != null) { 
     return Observable.of(this.settingslist); 
    } 

    else { 
     const authToken = localStorage.getItem('auth_token'); 
     const headers = new HttpHeaders() 
     .set('Content-Type', 'application/json') 
     .set('Authorization', `Bearer ${authToken}`); 

     return this.httpClient 
     .get(GLOBAL_URL.GET_URL + '/settings/product', { headers: headers }) 
     .map((response => response)) 
     .do(settingslist => this.settingslist = settingslist) 
     .catch(e => { 
      if (e.status === 401) { 
       return Observable.throw('Unauthorized');   
      } 

     }); 
    } 
    } 
} 

Answer 1

할 수있는 : 저는 현재 각도 4에 내 코드를 HttpClient를 사용하고 HTTP 클라이언트 용 HttpClient 랩

Answer 2

각도의 HttpClinet을 사용하면 전역 인터셉터를 정의 할 수 있습니다. 다음으로, (당신은 아마 AppModule을 원하는) 각도 모듈의 공급 업체에

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

목록을 :

는이 같은 아무것도하지 않는 간단한 인터셉터를 정의 할 수 있습니다.

{ 
    provide: HTTP_INTERCEPTORS, 
    useClass: NoopInterceptor, 
    multi: true, 
} 

귀하의 모든 요청이 이제이 인터셉터를 통과하게됩니다.

자세한 내용은 공식 가이드의 HttpClient interceptors in Angular을 참조하십시오. 거기에서 원하는 사용 케이스를 정확하게 찾을 수 있습니다 : setting headers on every request.

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

---

^{모든 코드는 문서에서 복사됩니다.}