How to set up a variable for a token In http header

I have a rest call and have created a header in my service. The problem I am facing right now is that , after 60 minutes , my token expires and I have to manually change the token inside my code.

I am trying to design a text box, where the user is just typing in the fresh token, and by clicking on the button, the token assigned variable is invoked and displays the data from my API.

I have already created a text box and button, but I am not sure how I can bring my logic of assigning the variable to my authroization token. and assigning them to my button.

I looked for resources around internet. But they are bit complicated. I am new to this, and looking forward for a simple solution. thank you.

Here is what I have tried so far.


<p>Please enter a valid token</p>
<input  #tokens
       (blur)="addtoken(tokens.value); tokens.value = ''">

<button (click)="addtoken(tokens.value)">Send Request</button>

<ul><li *ngFor="let token of tokens">{{token}}</li> </ul>

here is my service.ts

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

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'Bearer  bafhejfbewfwlejfwfwe'

  providedIn: 'root'

export class DataService {

  constructor(private http: HttpClient) { }

  getlocations() {
    return this.http.get(
      'url' , httpOptions)


Source: Angular

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.