Tips for including an authorization token in an HTTP request

Question

Tips for including an authorization token in an HTTP request

I encountered a 401 unauthorized error when trying to access my REST endpoint, likely due to the security measures I have implemented. I suspect that there might be an issue with how I am handling the HTTP headers.

The application utilizes a Spring Boot backend REST API, which I know functions correctly. This is evident because when I obtain a token using Postman and then use that same authorization token in Postman to interact with the API, everything works smoothly.

getWeatherByCityAndCountry(city: string, country: string): Promise<Weather> {

    let headers = new HttpHeaders();
    headers = headers.append('Authorization', 'Bearer '+ this.accessToken);
    return this.http.get(this.baseUrl + '/byCity/' + city + '/' + country, {headers: headers})
      .toPromise()
      .then(response => response as Weather)
      .catch(this.handleError)
  }

The accessToken has been hardcoded with a token value obtained from Postman.

angular typescript rest spring-boot

Answer 1

Answer №1

If you're looking to streamline the process of intercepting requests in Angular, my recommendation is to implement an interceptor that captures all requests automatically rather than manually adding them each time.

import {
  Observable
} from 'rxjs';
import {
  Injectable
} from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest
} from '@angular/common/http';

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(req: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
    const responseType = req.responseType || 'json';
    const apiToken = localStorage.getItem('Authorization');
    const authed = req.clone({
      headers: req.headers.set('Authorization', 'Bearer ' + apiToken),
      responseType
    });
    const notAuthed = req.clone({
      responseType
    });
    const modifiedReq = apiToken ? authed : notAuthed;

    return next.handle(modifiedReq);
  }
}

To integrate this interceptor into your project, add the following configuration to your module providers array:

{
      provide: HTTP_INTERCEPTORS,
      useClass: CustomHttpInterceptor,
      multi: true
}

Answer 2

If you're looking to streamline the process of intercepting requests in Angular, my recommendation is to implement an interceptor that captures all requests automatically rather than manually adding them each time.

import {
  Observable
} from 'rxjs';
import {
  Injectable
} from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest
} from '@angular/common/http';

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(req: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
    const responseType = req.responseType || 'json';
    const apiToken = localStorage.getItem('Authorization');
    const authed = req.clone({
      headers: req.headers.set('Authorization', 'Bearer ' + apiToken),
      responseType
    });
    const notAuthed = req.clone({
      responseType
    });
    const modifiedReq = apiToken ? authed : notAuthed;

    return next.handle(modifiedReq);
  }
}

To integrate this interceptor into your project, add the following configuration to your module providers array:

{
      provide: HTTP_INTERCEPTORS,
      useClass: CustomHttpInterceptor,
      multi: true
}

Tips for including an authorization token in an HTTP request

Answer №1

Similar questions

Resize the textarea to fit a maximum of five lines, and display a scrollbar if necessary

Is it possible for me to assign an observable to a value of undefined or null?

unable to assign an array to a different array in typescript

Having trouble setting up the calendar feature in my Ionic Angular application

Surprising Logging Quirks in Angular

conceal a div in Angular when the user is authenticated

What is the best way to perform type checking for a basic generic function without resorting to using a cumbersome cast

What is the process for switching views by tapping on a button?

Angular 2 routing for dynamic population in a grid system

Tips for fixing a GET 404 (not found) error in a MEAN stack application

Encounter an issue while running the angular build in production mode

Establishing a secure connection between Spring Boot data and a database with certificate authority verification

How can I use Angular to dynamically open a video that corresponds to a clicked image?

What methods can I use to locate the circular dependency within my program?

Angular's $location is reverting back after the modification

What steps should I follow to implement Cypress in an older project?

Variable not accessible in a Typescript forEach loop

Angular 4: Utilizing a class with a constructor to create an http Observable model

Angular 2 offers the ability to crop and save images effortlessly

What improvements can I make to enhance my method?