I've been working on an Angular app (that uses an Apache server with Basic auth as a proxy) that should have the following behavior:

1. The user has access to x.x.x.x:port/dashboard and gets prompted for credentials from the apache server
2. After that, the Angular app has access to the request headers and stores the 'authorization' field in a service
3. The REST API request code takes the value from the service and uses it to make requests

Point 1 and 3 are pretty basic stuff, the apache server acts as a proxy, routing the packets to the angular container running on the same machine, but I'm having trouble figuring out the second one.

TLDR: Is there any way to get the 'authorization' request header from a webpage/webapp if the user has already logged in from the browser using basic auth?

What happened/What I did try (please correct me if I am wrong about any statement here):

Of course I can't access the previous request headers from the page, so since the browser stores and reuses the credentials once it had access, I can intercept the headers from future requests and just get the header i need from there.

So that's what I did: I used the most basic example of HttpInterceptor with a console.log(), tested it with get requests that contained the credentials and it worked fine.

Then i removed the credentials and tried to get them from other requests, like .get("/"), .get("#") and .get("/dashboard") but it didn't work, as the browser repeatedly kept asking me for credentials until apache returned a ERR_TOO_MANY_RETRIES.

Now, I've been thinking that by design such a behavior shouldn't even be possible, as there are more convenient solutions to keep information about a user's session. A coworker told me instead that this is solvable with deep enough angular knowledge. Since i didn't find much about it online I want to ask you: Is this feasible just in Angular?

If not, is there any viable workaround?

Code used to test:

httpd.conf

<Location /dashboard/>
        AuthType Basic
        AuthName "Access Restricted"
        AuthUserFile /etc/apache2/.htpasswd
        Require valid-user
     </Location>

HttpInterceptor code

export class HeaderInterceptor implements HttpInterceptor {

constructor(){}

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

    console.log(req.headers)

    return next.handle(req).pipe(tap((suc: any) => {
        if(suc.type !== 0){
            return suc
        }

    }),
    catchError((error: any, caught: any) => {
        return Observable.throw(error);
    }))
    }
}