Redirect to external url with Headers in Angular

I think the way you'd do it is to send the headers through an XHR request. Then if you wanted to reload afterwards you could. But the header transmission would happen first

this.http
.post('api/login', body, {
  headers: new HttpHeaders({
    'Authorization': 'my-auth-token',
    'x-header': 'x-value'
  })
}).subscribe(() => window.location.href='https://some-other-website.com')

1. You create the headers.

e.g: JSW, if you have your token in localStorage, as "current_user" token:

import { HttpHeaders } from '@angular/common/http';
....
const headers = new HttpHeaders()
  .append("Authorization", "Bearer " + localStorage.getItem("current_user")["token"])
  .append("Content-type", "application/json");

2. You define your httpOptions.

   const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', Authorization: 'your-auth-token' }) };

or more tidy (if you already have declared the const headers before

const httpOptions = {
  headers
};

3. You make your redirect / call to the external url.

    const externalUrl = 'http://....';
    const dataToPut = 'Usually, it will be an object, not a string';
    
    this.http.post<Hero>(this.externalUrl, dataToPut , httpOptions)
        .pipe(
          catchError(this.handleError('post error: ', dataToPut ))
        );

Anyway, once you know how to do it, the best way to send the Authentication token in header is throught an INTERCEPTOR, that is going to intercept all your http calls and insert in the headers the Authentication parameters: https://angular.io/guide/http#intercepting-requests-and-responses

P.S: I strongly recommend you to read this 2 official documentation pages for further examination... is all there, a more detailed information

https://angular.io/guide/http

https://angular.io/guide/http#adding-headers

[Angular] [http] [headers] [interceptor]