ItSolutionStuff.com

Angular Httpclient Headers Authorization Bearer Token Example

By Hardik Savani • May 2, 2024
Angular

Now, let's see tutorial of angular http headers authorization bearer. I would like to show you pass bearer token in header angular. This tutorial will give you simple example of how to pass token in header in angular. if you have question about token based authentication in angular 8 with web api then I will give simple example with solution. Here, Creating a basic example of how to set authorization header in angular.

In this example, i will show you how to set headers with authorization bearer token in http request. we will use HttpHeaders to pass headers in angular http get, post, put and delete request. you can use this example in angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 versions.

Solution:

let auth_token = "asasa21212....";

const headers = new HttpHeaders({

'Content-Type': 'application/json',

'Authorization': `Bearer ${auth_token}`

});

const requestOptions = { headers: headers };

this.http

.get('http://localhost:8001/events.php', requestOptions)

.subscribe((res: any) => {

console.log(res);

});

Let's see below component ts file code:

src/app/app.component.ts

import { Component } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'fullcal';

/*------------------------------------------

--------------------------------------------

Define constructor

--------------------------------------------

--------------------------------------------*/

constructor(private http: HttpClient) {}

/*------------------------------------------

--------------------------------------------

Define ngOnInit()

--------------------------------------------

--------------------------------------------*/

ngOnInit() {

let auth_token = "asasa21212....";

const headers = new HttpHeaders({

'Content-Type': 'application/json',

'Authorization': `Bearer ${auth_token}`

});

const requestOptions = { headers: headers };

this.http

.get('http://localhost:8001/events.php', requestOptions)

.subscribe((res: any) => {

console.log(res);

});

}

}

Output:

I hope it can help you...

Tags: Angular
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Angular 13 RxJS Observable with Httpclient Example

Read Now →

Angular 13 HttpClient & Http Services Tutorial Example

Read Now →

Angular 12 RxJS Observable with Httpclient Tutorial

Read Now →

Angular Material Autocomplete with API Example

Read Now →

Angular 10 HttpClient Service Tutorial and Example

Read Now →

Angular Material Multi Step Form Example

Read Now →

Angular HttpClient with Observable Example

Read Now →

Angular HttpClient Delete Example | Angular Http Delete Request Example

Read Now →

Angular HttpClient Get Example | Angular Http Get Request Example

Read Now →

Angular Service with Httpclient Example

Read Now →