What is the process for incorporating a bearer token generated for other API requests into the authorisation header?

Question

What is the process for incorporating a bearer token generated for other API requests into the authorisation header?

I have developed a feature that communicates with an external API endpoint. I have utilized their authentication endpoint to generate a bearer token which I will utilize in subsequent API requests.

Considering this is a third-party API, the URLs and headers for my destination are constructed via a proxy.

Now that I have obtained the access_token, how can I include this token in the authorization header?

https://i.sstatic.net/Dmrzg.png

Component

 showOAuth() {
    this.zebraService.getOAuth()
      .subscribe((data: any) => {
      console.log('Zebra Response: ', data);
      console.log(data.body);
      this.OAuth = data.body;

      this.access_token = this.OAuth.access_token;
      console.log(this.access_token);
      });
  }

Proxy

"/zebraAccessApi": {
  "target": "https://api.com",
  "secure": true,
  "changeOrigin": true,
  "pathRewrite": {
    "^/zebraAccessApi": ""
  },
  "headers": {
    "client_id": "",
    "client_secret": ""
  }
},

"/zebraSetAppLed": {
  "target": "https://api.com/setAppLed",
  "secure": true,
  "changeOrigin": true,
  "pathRewrite": {
    "^/zebraSetAppLed": ""
  },
  "headers": {
    "Content-Type": "application/json",
    "Authorization": ""
  }
}

Service

zebraOAuthUrl = '/zebraAccessApi';
    zebraSetAppLedUrl = '/zebraSetAppLed';

    public getOAuth() {    
        let options = {
            observe: 'response' as 'body',
            response: 'json'
        };
        return this.http.get(this.zebraOAuthUrl, options);
    }

angular typescript proxy

Answer 1

Answer №1

If you're looking to customize your HTTP requests with specific headers, consider creating an interceptor:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const authenticationToken = <YOUR_TOKEN>;

  // Add default headers if no token is provided
   const requestWithoutToken = request.clone({
    setHeaders: {
      'Content-Type': 'application/json', 
    }
  });
  if (!authenticationToken) {
    return next.handle(requestWithoutToken);
  }

  // Customize the headers here based on the presence of a token
  const updatedRequest = request.clone({
    setHeaders: {
      Authorization: `Bearer ${authenticationToken}`,
      'Content-Type': 'application/json',
    }
  });

  // Handle response and errors
  return next.handle(updatedRequest).pipe(
    tap((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        // Do something with the response data
      }
    }, (error: any) => {
      if (error instanceof HttpErrorResponse) {
        console.log(error)
      }
    })
  );
}

An interceptor plays a crucial role in manipulating HTTP requests by adding necessary headers like authentication tokens. You can tailor this function according to your requirements.

To learn more about Angular interceptors, visit: https://angular.io/api/common/http/HttpInterceptor

Answer 2

If you're looking to customize your HTTP requests with specific headers, consider creating an interceptor:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const authenticationToken = <YOUR_TOKEN>;

  // Add default headers if no token is provided
   const requestWithoutToken = request.clone({
    setHeaders: {
      'Content-Type': 'application/json', 
    }
  });
  if (!authenticationToken) {
    return next.handle(requestWithoutToken);
  }

  // Customize the headers here based on the presence of a token
  const updatedRequest = request.clone({
    setHeaders: {
      Authorization: `Bearer ${authenticationToken}`,
      'Content-Type': 'application/json',
    }
  });

  // Handle response and errors
  return next.handle(updatedRequest).pipe(
    tap((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        // Do something with the response data
      }
    }, (error: any) => {
      if (error instanceof HttpErrorResponse) {
        console.log(error)
      }
    })
  );
}

An interceptor plays a crucial role in manipulating HTTP requests by adding necessary headers like authentication tokens. You can tailor this function according to your requirements.

To learn more about Angular interceptors, visit: https://angular.io/api/common/http/HttpInterceptor

What is the process for incorporating a bearer token generated for other API requests into the authorisation header?

Answer №1

Similar questions

Error during Angular AOT compilation: The 'length' property is not available on the 'AbstractControl' type

Stop focusing on mat-select after a selection is made

Determine the character count of the text within an *ngFor loop

Resolve the issue of text overflow in PrimeNG Turbo Table cells

Creating a search functionality in Angular that allows users to input multiple search terms and

A guide to setting initial values in Angular 2 using TypeScript

Finding the index of a chosen option in Angular

Setting the first day of the week in ngbBootstrap DatePicker Configuration

Removing a request that lacks the id parameter in a .NET WebAPI

Struggling to import a React component for sharing purposes

Having difficulty building a react.js application using Visual Studio 2019

Issues arise when attempting to utilize Async/Await with a gRPC method

TimeStamp Recorder - Typescript

Ensuring successful payment by facilitating the transfer of user id values to Stripe

The Angular reactive form is being submitted without completing the submission process

"Navigating back to the previous screen in Ionic 2 - A step-by-step guide

Passing a service into a promise in Angular 2 using TypeScript

Having trouble implementing the ternary operator (?) in TypeScript within a Next.js project

Create a Bar Graph Using a List

Automating the scrolling function in Angular 2 to automatically navigate to the bottom of the page whenever a message is sent or opened