文章/答案/技术大牛

发布

社区首页 >问答首页 >启动头一次并发送每个HTTP请求

问启动头一次并发送每个HTTP请求
EN

Stack Overflow用户

提问于 2019-12-02 09:44:12

回答 2查看 461关注 0票数 0

我正在使用一个服务来获取HTML中的用户it，它工作得很好。这里使用Angular服务获取用户详细信息，并用于后端ASP.NET Web Api。到目前为止，这是我迄今为止所做的：

Web 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
}

最后在角分量中

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

N.B.：我对Angular几乎是新手，它的工作流程，试图用更好的方式解决问题--谢谢。

asp.net-web-api

angular

云直播特惠9.9元起

基于腾讯云多年音视频能力积淀，支持超低延迟、超高画质、超大并发访问量的直播需求，满足客户的多样化直播需求

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-12-02 09:54:43

您应该使用interceptor。

如果您想在每个请求中添加特定的标头，您必须这样做：(这里，我在每个http请求中添加接受标头)

@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请求时，该拦截器将修改请求的头。

更多解释：

角度拦截器是一个强大的特性，它可以以多种方式用于保护和处理许多与HTTP相关的现象。

我们能用拦截器做什么？

在应用程序中，可以通过多种方式使用拦截器。

-在HTTP调用中设置请求头，如Content或发送任何自定义标头。

-通过设置安全令牌来验证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模块中注册拦截器。

票数 2

Stack Overflow用户

发布于 2019-12-02 09:52:11

您可以使用HttpInterceptor来完成它，它可以拦截您提出的所有请求以及它们的所有响应。

因此，您还可以使用它在每个失败请求上显示一致的错误消息。

您可以查看角文献以了解如何实现它。

这个示例非常类似于您需要的内容：

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