Angular 在没有任何 WebAPI 调用的情况下获取 http 响应 header？

Question

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

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

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

在正常使用情况下

我连接到我的网站 www.connecttosite.com -> 模块拦截请求并登录用户 -> 验证请求然后发送额外的 http headers 到我的网站 api阅读这些额外的 header 并获取用户信息。

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

我想知道有没有办法使用 angular 只有我可以连接到网站 -> angular 以某种方式进行调用 -> 模块拦截调用 -> 将额外信息附加到响应 header 我可以在 angular 中看到这个 header 而根本不必使用网络 api?

我可以使用 angular 作为网络 api 吗？

编辑：

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

见下图：

授权是堆栈中的第一个调用（绿色圆圈）。这是拦截对网站的请求并让用户登录的模块。
红色箭头是对angular网站的实际调用。然后你可以看到正常的 angular 模块（main.js、env.js、polyfills 等）加载后。
当对网站进行初始调用时，我需要的 header 甚至在 angular 加载所有模块之前就可用。如何在 angular 加载时立即访问它们？

Answer 1

是的，您可以使用 HttpInterceptor 来实现。 HttpInterceptors 允许您直接 return 响应而不是将其发送到服务器，在将其发送到服务器之前修改请求（URL、body、headers 等）and/or 修改来自服务器的 return 响应。

例如下面的拦截器 return 如果请求 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 { }

Answer 2

尝试根据您的情况使用模拟 api。

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

所以你会这样称呼它

this.http.get('http://localhost:3000/api/YourMethodToGetUserInformation');

Angular 在没有任何 WebAPI 调用的情况下获取 http 响应 header？

Angular Get http response header without any WebAPI call?

angular

asp.net-web-api

pingfederate

pingaccess