Tips for Saving Information from httpClient Post reply?

After receiving a response, I am attempting to save a token in session storage. However, when I try to compile this code, I encounter an error stating 'Property 'access_token' does not exist on type 'Object'. This error appears before sending a request, but my goal is to execute session storage after receiving a response rather than before sending the request.

this.http.post(url,null,
   {
     headers : new HttpHeaders({
      'Content-Type': 'application/x-www-form-urlencoded',
     'Authorization' :'Basic '+ btoa('username:password')
     })
   }
).subscribe(
    data => { // json data

      console.log('Success: ', data);
      sessionStorage.setItem("Token ",data.access_token)
  },
  error => {
      console.log('Error: ', error);
  }
)

}

Answer №1

What type of response data do you typically use? You have the flexibility to choose any type and format it as needed. However, it is considered a best practice to define an interface for your response data.


{
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + sessionStorage.getItem('token')
  })
}).subscribe(
  (data: any) => { // handle JSON data
    console.log('Success: ', data);
    localStorage.setItem("Token", data.access_token);
  },
  error => {
    console.log('Error: ', error);
  }
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for eliminating unnecessary module js calls in Angular 9

https://i.sstatic.net/3R7sr.png Utilizing a lazy loading module has been efficient, but encountering challenges with certain modules like all-access-pass and page not found as shown in the image above. Is there a way to effectively remove unused module J ...

Secure your NetSuite API calls with OAuth 1.0 signature authorization

After extensively reviewing the documentation and various posts on Stack Overflow about creating a signature for NetSuite OAuth1.0 with TBA, I believe that I have followed all of the necessary steps and correctly generated the key. However, upon making the ...

Could someone please help me identify the mistake in this code? I recently created a new class, imported it into a .ts file, and then proceeded to define

Upon checking the console, an error message appeared stating that Recipe was not defined. To resolve this issue, I made sure to include the necessary class definition in a separate file at the end of my code. The import statement: import { Recipe } from ...

Error TS7027: Unreachable code was identified in TypeScript

sortArrayDate(arrayToSort, arrayDateKey, order) { if (order === 'ascending') { arrayToSort.sort(function(a, b){ if (a[arrayDateKey] === '' || a[arrayDateKey] === null) { return 1; } if (b[arra ...

How to Hide Parent Items in Angular 2 Using *ngFor

I am dealing with a data structure where each parent has multiple child items. I am trying to hide duplicate parent items, but accidentally ended up hiding all duplicated records instead. I followed a tutorial, but now I need help fixing this issue. I only ...

Importing Typescript modules by specifying their namespace instead of using a function

I have been working on a project where I needed to generate typings from graphql using the gql2ts library. In the gql-2-ts file, I initially used a namespace import for glob, which resulted in TypeScript showing me an error as intended. I then switched the ...

What is the procedure for inputting the settings for the export module in webpack?

I am currently working on setting up this webpack configuration file. However, I encountered an issue where the error message states that "any" is being used as a value instead of a type. How can I resolve this issue? module.exports:any = { ...

Is it possible to update input form fields in an Angular application?

I am currently designing a straightforward web page featuring a modal for creating a new object named Partner and sending it to the server. The page also includes multiple input fields to showcase the newly created data. In this project, I am utilizing Ang ...

Issues arise during the migration process of upgrading the project from Angular 8 to Angular 15

I am currently in the process of upgrading an Angular project from version 8.3.26 to a version beyond 12. I know that this should be done incrementally, so my first step is to upgrade to Angular 9. However, when I follow the instructions in the documentati ...

The Angular 2 application is experiencing issues with displaying the Bootstrap 4.3 Modal

I am new to Angular so please forgive me if this question sounds silly. I am trying to implement a modal in my app and I followed an example from Bootstrap's documentation. However, the modal doesn't seem to work in my app. Everything else has be ...

The component is failing to store its value within the database

I'm encountering an problem when attempting to save an option in the database. To address this issue, I created a component in Svelte called StatePicker that is responsible for saving US States. However, when I try to save it in the database using a ...

Is there a recommended approach in Vuex to detect when a state change has occurred?

Our team has developed a Vuex module to store user-input data from a form. If the form has unsaved changes and the user tries to leave the page, we want to warn them so they can decide whether or not to proceed. It would be convenient if we could simply u ...

Dealing with numerous errors from various asynchronous pipes in angular - a comprehensive guide

I am facing an issue with 2 mat-select elements in my component, both of which utilize the async pipe: <div class="flex-col"> <mat-label>Issue Desc </mat-label> <mat-form-field> < ...

A guide on passing variables to the MUI styled function within ReactJS

Is it possible to pass a variable directly to the styled function in order to conditionally change style properties while using MUI styled function? I want to achieve something like this: borderColor: darkMode ? 'white' : 'black' const ...

Scope Error: Variable 'Undefined' is Not Defined Outside Function in Angular 2

In one of my methods, I am subscribing to an observable and later need to unsubscribe from it in another method. The subCounter() method is triggered from an initialization function and works correctly. subCounter() { this.fml = this.playerService.coun ...

What is the method for utilizing a class variable without assigning a value to it initially

class testClass { student: { name: string, age: number } constructor(options?: any) { this.student = { name: '', age: 0 }; } setStudent(name:string, age:number) { this.student.name ...

Encountering a ReactJs and TypeScript error: "menuItems.map is not a function, issue with map method"

Greetings! I am currently working on implementing the logic of using useState and mapping an array to show only one dropdown item at a time. Below is my array structure with tags (menu name, links (to router), icon (menu icon), and if there are dropdown i ...

NGRX Store: Unable to modify the immutable property '18' of the object '[object Array]'

While attempting to set up an ngrx store, I encountered 7 errors. Error Messages: TypeError: Cannot assign to read only property '18' of object '[object Array]' | TypeError: Cannot assign to read only property 'incompleteFirstPass ...

Compiling an Angular project with an external library in AOT mode using angular-cli is causing issues and not compiling successfully

Embarking on a fresh new project, I utilized angular-cli 8.1.2 for the generation process. The goal is to establish a shared library that caters to multiple microservices (apps). This particular library should remain separate from the applications folder, ...

The attribute 'getTime' is not found in the data type 'number | Date'

class SW { private startTime: number | Date private endTime: number | Date constructor() { this.startTime = 0, this.endTime = 0 } start() { this.startTime = new Date(); } stop() { this.endTim ...