Angular获取http响应标头而没有任何WebAPI调用吗？

问题描述

我的sql服务器上安装了一个登录授权模块。

该模块是从wwwroot目录中的web.config 文件触发的。

  <modules>
      <add name="PingAccessModule"/>
    </modules>

在正常情况下

我连接到我的网站www.connecttosite.com->模块拦截请求并将用户登录->请求被验证，然后将其他http标头发送到我的Web api，在其中我可以读取这些附加标头并获取用户信息。 / p>

问题是这需要我创建一个额外的asp.net Web api项目，该项目与我的angular应用程序位于同一目录中。

我想知道只有我可以使用角度连接到网站-> angular以某种方式进行呼叫->模块拦截呼叫->将额外信息附加到响应头我可以看到此标头有角，而根本不必使用Web api？

我可以使用angular充当网络api吗？

编辑：

因此，如果我要创建自己的标题，但登录模块会将用户信息附加到标题，则当前答案有效。

查看下面的照片：

授权是堆栈中的第一个调用（绿色圆圈）。这是拦截网站请求并登录用户的模块。
红色箭头是对角度网站的实际调用。然后，您可以看到加载后的普通角度模块（main.js，env.js，polyfills等）。
对网站进行首次调用时，即使在所有模块进行角向加载之前，我所需的标头也将可用。角负载时如何正确访问它们？

解决方法

尝试根据情况使用模拟API。

这应该允许您将angular用作api并从常规的angular客户端调用它。

因此，您可以将其投放并像这样

.css

是的，您可以使用HttpInterceptor来实现。 HttpInterceptors允许您直接返回响应，而不是将其发送到服务器，在将请求发送到服务器之前修改请求（URL，正文，标头等）和/或修改从服务器返回的响应。

例如，如果请求url与/ my / path匹配，则以下拦截器将返回响应而不进行服务器调用。它还修改了请求

import { HttpInterceptor,HttpRequest,HttpHandler,HttpEvent,HttpResponse,HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable,of } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

  public intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url === '/my/path') {
      // If request matches a certain url,do not call server and return result from angular
      return of(new HttpResponse({
        body: '{x: 1,y: 2}',headers: new HttpHeaders({
          'Content-Type': 'application/json'
        }),status: 200,}));
    }
    if (req.url === '/my/other/path') {
      // if request matches a certain url,modify the request before sending it to the server
      req = req.clone({
        setHeaders: {
          'X-MY-CUSTOM-HEADER': 'value'
        },});
    }
    // Pass the request to the next interceptor,if there are none,then the server is called.
    const result = next.handle(req);
    return result.pipe(
      map((response) => {
        // modify response from server here
        return response;
      }),);
  }
}

要使用拦截器，请通过提供HTTP_INTERCEPTORS如下将其添加到应用程序模块中：

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

angular asp.net-web-api pingfederate