He estado trabajando en una aplicación Angular (que usa un servidor Apache con autenticación básica como proxy) que debería tener el siguiente comportamiento:

1. El usuario tiene acceso a xxxx:port/dashboard y se le solicitan las credenciales del servidor apache
2. Después de eso, la aplicación Angular tiene acceso a los encabezados de solicitud y almacena el campo 'authorization' en un servicio
3. El código de solicitud de la API REST toma el valor del servicio y lo usa para realizar solicitudes

Los puntos 1 y 3 son cosas bastante básicas, el servidor apache actúa como un proxy, enrutando los paquetes al contenedor angular que se ejecuta en la misma máquina, pero tengo problemas para descifrar el segundo.

TLDR: ¿Hay alguna forma de obtener el encabezado de solicitud de 'authorization' de una página web/aplicación web si el usuario ya inició sesión desde el navegador usando la autenticación básica?

Lo que sucedió/lo que intenté (corríjame si me equivoco con alguna declaración aquí):

Por supuesto, no puedo acceder a los encabezados de solicitudes anteriores desde la página, así que dado que el navegador almacena y reutiliza las credenciales una vez que tuvo acceso, puedo interceptar los encabezados de futuras solicitudes y obtener el encabezado que necesito de allí.

Así que eso fue lo que hice: usé el ejemplo más básico de HttpInterceptor con un console.log() , lo probé con solicitudes de obtención que contenían las credenciales y funcionó bien.

Luego eliminé las credenciales e intenté obtenerlas de otras solicitudes, como .get("/") , .get("#") y .get("/dashboard") pero no funcionó, ya que el navegador se repetía repetidamente siguió pidiéndome credenciales hasta que apache devolvió un ERR_TOO_MANY_RETRIES .

Ahora, he estado pensando que, por diseño, tal comportamiento ni siquiera debería ser posible, ya que existen soluciones más convenientes para mantener información sobre la sesión de un usuario. En cambio, un compañero de trabajo me dijo que esto se puede resolver con un conocimiento angular lo suficientemente profundo. Como no encontré mucho al respecto en línea, quiero preguntarle: ¿Es esto factible solo en Angular?

Si no, ¿hay alguna solución viable?

Código utilizado para probar:

httpd.conf

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

código HttpInterceptor

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