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

Streamlined method for creating forms and charts within SharePoint

Managing different data types in a single event emitter using Typescript: how do you approach it?

Encountering a type error with gatsby-plugin-dark-mode in a Typescript Gatsby setup

After a recent deployment, the Angular PWA hosted on a NestJS server experiences unexpected crashes

Limiting the number of items shown in the dropdown panel of an NgSelect

How is it that void can be assigned undefined?

What are the best practices for securely storing SSL certificates and public/private keys?

Leverage custom attributes for user input in Ionic 2

What is the correct version compatibility matrix for Expo, NPM, Node, React Native, and TypeScript?

Using templateUrl from a remote server in Angular 2 can be achieved by specifying the complete URL

Exploring the integration of an Angular 4 application with Visual Studio 2017 using dot net core. Techniques for accessing configuration keys from appsetting.json in a TypeScript

Tips for incorporating runtime configuration into an Angular module and effectively leveraging it

Slim 4 with Angular 10: Issues with downloading PDF files through API, as Angular blob response is coming back empty

Accessing the NestJS DI container directly allows for seamless integration of dependency

formik connects props that are lacking certain properties

Best Practices for Variable Initialization in Stencil.js

How can a parent component update a child component's prop value in VUE?

Tips on creating an object within a TypeScript interface

Using Stack and Drawer Navigations Together in React Native Navigation(v6)

When null is assigned to a type in Typescript, it does not result in an error being triggered