Angular Get http response header without any WebAPI call?

Question

I have a login authorization module that is installed on my sql server.

The module is triggered from my web.config file in my wwwroot directory.

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

In normal use case

I connect to my website www.connecttosite.com -> module intercepts request and logs user in -> request is verified then sends additional http headers to my web api where I can read these additional headers and get the user information.

The problem is this requires me to create an additional asp.net web api project that exists in the same directory as my angular application.

I want to know is there a way using angular only that I can connect to the website -> angular makes a call somehow -> module intercepts call -> attaches extra information to response header and I can see this header in angular and not have to use web api at all?

Can I use angular to act as web api?

EDIT:

So the current answer works if I want to create my own headers but the login module attaches user info to the headers.

See the photo below:

1. The authorization is the very first call in the stack (circled in green). This is the module intercepting the request to the website and logging the user in.

2. The red arrow is the actual call to the angular website. Then you can see the normal angular modules (main.js, env.js, polyfills etc) loading after.

3. When the initial call is made to the website, the headers that I need will be available even before angular loads all of the modules. How do I access them right when angular loads?

Answer 1

Try to use a mock api for your situation.

This should allow you to use angular as an api and call it from your normal angular client.

So you would serve it and call it like so

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

Answer 2

Yes you can achieve this by using HttpInterceptor. HttpInterceptors allow you to return response directly instead of sending it to the server, modify request (URL, body, headers, etc) before sending it to the server and/or modify the response returned from the server.

For example the following interceptor return the response without making a server call if request url matches /my/path. It also modifies request

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

To use the interceptor, add it in app modules by providing HTTP_INTERCEPTORS as follows:

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