發起標頭一次並在每個 HTTP 請求中發送

Question

我正在使用一項服務來獲取 HTML DropDownList用戶 ID，它工作正常。 這里使用Angular服務來獲取用戶詳細信息和后端ASP.NET Web Api 。 到目前為止，這是我迄今為止所做的：

網絡 API - C# ：

[Route("api/values/GetUserInfo")]
[Authorize]
[HttpGet]
public List<User> GetUserInfo(string type)
{
   List<User> lst = null;

   if (type!= null)
   {
       lst = GetUserInfo().Where(c => c.userType== type).ToList();
   }
   else
   {
       lst = GetUserInfo().ToList();
   }

   return lst;
}

角度：服務 - UserService

GetUserInfo(dept: string) {
   debugger;

   this.Url = 'http://localhost:53743/api/values/';
   var a = this.Url + 'GetUserInfo';

   var headers_object = new HttpHeaders().set("Authorization", "Bearer " + localStorage.getItem('Token')); //Set JWT Token 

   let params = new HttpParams().set("type", type);

   return this.http.get<any>(a, { headers: headers_object, params: params }); //Get request to retrieve the user details from database server
}

最后在Angular 組件中：

public empIds: any[];

constructor(private dataservice: UserService, private appComponent: AppComponent, private sanitizer: DomSanitizer, private route: Router, private http: HttpClient) { //UserService injected in the constructor

}

ngOnInit() {
   this.LoadUserData('');
}

LoadUserData(dept: string) {
   debugger;
   this.dataservice.GetUserInfo(dept).subscribe(result => { //Calling the `Angular` service here
   this.empIds = result; //Keeping the result set here
  }, error => console.error(error));
}

到目前為止，這些是我完成的工作，我想知道我是否可以在每個HTTP請求中管理一次啟動的標頭。 就像一個處理所有帖子和獲取請求的類，我對它進行了一些研究，搜索護目鏡，但有點困惑，我怎樣才能讓它相應地工作？ 以下是我迄今為止一直在研究並試圖在我的代碼示例中實現的內容。 但問題是當有參數時我可以如何使用以下代碼示例處理它們。

角度 - httpService ：

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class HttpClientService { 

  value: any;

  constructor(private http: HttpClient) { }
  createAuthorizationHeader(headers: HttpHeaders) {
    //headers.append('content-type', 'application/json');
    //headers.append("Authorization", "Bearer " + localStorage.getItem('Token'));
  }

  get(url, value, type) {
    debugger;
    let params = new HttpParams().set("dept", dept);
    var headers_object = new HttpHeaders().set("Authorization", "Bearer " + value);

    const httpOptions = {
      headers: headers_object
    };

    return this.http.get<any>(url, {
      headers: headers_object, params: params
    });
  }

  post(url, data, value) {
    let params = new HttpParams();
    let headers_object = new HttpHeaders();
    headers_object.append('content-type', 'application/json');
    headers_object.append("Authorization", "Bearer " + value);

    //this.createAuthorizationHeader(headers);
    return this.http.post<any>(url, data, {
      headers: headers_object, params: params
    });
  }
}

作為以下組件中的示例：

this.httpService.get(a, localStorage.getItem('Token'), dept).subscribe(result => {
    this.empIds = result;
}, error => console.error(error)); 

注意：我幾乎是Angular新手，它的工作流程，試圖以更好的方式解決問題 - 謝謝。

Answer 1

您可以使用HttpInterceptor來完成它，它可以攔截您發出的所有請求及其所有響應。

因此，您還可以使用它在每個失敗的請求上顯示一致的錯誤消息。

您可以查看Angular 的文檔以了解如何實現它。

給出的示例與您需要的非常相似：

import { AuthService } from '../auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private auth: AuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // Get the auth token from the service.
    const authToken = this.auth.getAuthorizationToken();

    // Clone the request and replace the original headers with
    // cloned headers, updated with the authorization.
    const authReq = req.clone({
      headers: req.headers.set('Authorization', authToken)
    });

    // send cloned request with header to the next handler.
    return next.handle(authReq);
  }
}

Answer 2

你應該使用interceptor 。

如果您想在每個請求中添加特定的標頭，您必須執行以下操作：（這里我在每個 http 請求中添加 Accept Header ）

@Injectable()
export class ExampleAuth implements HttpInterceptor {

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

    request = request.clone({ headers: request.headers.set('Accept', 'application/json') }); // Here you can add your special headers 

    return next.handle(request);
  }

}

然后在您的應用程序模塊的提供程序部分添加攔截器，如下所示：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ExampleAuth, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

現在，每當發出新的 HTTP 請求時，此攔截器都會修改請求的標頭。

更多解釋：

Angular Interceptor 是一個強大的功能，可以以多種方式用於保護和處理許多與 HTTP 相關的現象。

我們可以使用攔截器做什么？

攔截器可以在應用程序中以多種方式使用。

– 在 HTTP 調用中設置請求標頭，如 Content-Type 或發送任何自定義標頭。

– 通過設置安全令牌來驗證 HTTP 調用

– 在 HTTPS 調用正在進行時顯示旋轉加載器/進度條。

– 在一處處理 HTTP 調用中的錯誤

– 使用通知/吐司顯示響應消息

編輯：

根據您的示例，在您的 HttpClientService 中，您必須刪除以下幾行，因為它們會自動添加到攔截器中的 http 請求標頭中：

var headers_object = new HttpHeaders().set("Authorization", "Bearer " + value);
 headers_object.append('content-type', 'application/json');

修改您的 HttpClientService 如下：

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class HttpClientService { 
  value: any;

  constructor(private http: HttpClient) { }

  get(url, value, type) {
    debugger;
    let params = new HttpParams().set("dept", dept);

    const options = {
      params: params
    };
    return this.http.get<any>(url, options);
  }

  post(url, data, value) {
    let params = new HttpParams();
    const options = {
      params: params
    };
    return this.http.post<any>(url, data, options);
  }
}

然后在攔截器中我們必須添加我們剛剛從HttpClientService刪除的標頭

@Injectable()
export class ExampleAuth implements HttpInterceptor {

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

    request = request.clone({ headers: request.headers.set('content-type', 'application/json') }); 
    request = request.clone({ headers: request.headers.set("Authorization", "Bearer " + localStorage.getItem('Token') ) });

    return next.handle(request);
  }

}

然后在 app 模塊中注冊攔截器。