You cannot use Angular 5 to send a post request with a token that has been retrieved

Hello, I'm facing an issue with making a post request in Angular 5. The token I retrieve seems correct as it works fine when tested with Postman. Can someone provide me with a hint or suggestion on what could be going wrong?

AuthService.ts


getProfile(){
this.loadToken();
let headers = new HttpHeaders();
headers.append('Authorization', this.authToken);
headers.append('Content-Type', 'application/json');
return this._http.get('http://localhost:8080/users/authenticate', {headers: headers}).map(res => res);
};

loadToken() {
console.log(this.authToken);    //undefined here
this.authToken = localStorage.getItem('id_token');
console.log(this.authToken)     // correct token here
}

ProfileComponent.ts


ngOnInit() {
this._authService.getProfile().subscribe(profile => {
console.log('1', profile);
this._router.navigate(['/profile'])
}, err => {
console.log(`Error`, err);      // IT GOES STRAIGHT HERE
return false;
});
}

//ERROR OUTPUT
HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "Unauthorized", url: "http://127.0.0.1:8080/users/profile", ok: false, …}

Answer №1

Here is how it went down:

const headers = new HttpHeaders().append('Authorization', this.authToken).append('Content-Type', 'application/json'); 

Big thanks for the chaining trick, @LLai!

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

Exploring the depths of object properties with Angular, JavaScript, and TypeScript: A recursive journey

Let's consider an object that looks like this: const person = { id: 1, name: 'Emily', age: 28, family: { mother: { id: 101, name: 'Diana', age: 55 }, fathe ...

Eliminate the underscore from mat-select in (@angular/material 15.0.3)

Is there a way to remove the underline from mat-select? <mat-form-field style="margin: 2em 2em 2em 2em" appearance="fill" > <mat-label>Choose an option</mat-label> <mat-select> <mat-option value=& ...

Angular ngClass and ngIf directives failing to update upon alterations

In my current Angular project, I am working on a functionality where I need to dynamically change a class based on a variable without having to refresh the page. I have experimented with *ngIf/else and [ngClass] directives, which do work, but unfortunatel ...

The .value property on the form group displays numeric values as either null or an empty string

I'm encountering an issue with extracting data from a form group. Within my code, there is a formGroup named lineitemForm, and I am attempting to structure this form group as follows: private formatTransferData() { const depositDates = this.get ...

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...

What is the syntax for typing the router instance in Next.js?

I'm working on a password reset request form in my Next.js project. Here's the code I have: "use client"; import * as React from "react"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } fro ...

The component is expected to return a JSX.Element, however it is failing to return any value

The issue lies with this component: const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => { props.map((item, index) => { return <a href={item.href} key={index}>{item.name}</a> }) }; export default Naviga ...

Angular Elements: the crucial link to Material Dependencies

Currently in the process of developing an Angular Element for integration into various projects. This element will serve as a component housing Angular Material components within its template, necessitating the inclusion of a linked Material theme CSS file ...

Finding the location of an "Apply" button on an Angular HTML page

There is an issue with the positioning of the apply button in the filter bar. Sometimes it displays in the next row instead of alongside the other filters. How can I determine the exact position of this apply button within the HTML page? <div class=&quo ...

Utilizing Angular 2 canActivate feature to make a promise call to connect with a remote service

Initially, I'm unsure if this approach is the most effective way to tackle the issue at hand. What I am seeking is a route guard on "/" that verifies whether the user is logged in and, if so, redirects them to "/dashboard". It's important for thi ...

When attempting to send a token from an account to a marketplace in ERC721, the transfer caller must either be the owner

Currently, I am in the process of transferring my NFT to a marketplace pragma solidity ^0.8.7; import "@openzeppelin/contracts/utils/Counters.sol"; import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol"; import & ...

A guide on cycling through the data within the input fields

Here's my code snippet: <div class="form-group row text-right" *ngFor='let row of vipInput'> <label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label> <div class="col-sm-9 form-control-label m-t-5 ...

Incorporating HTML code within a .ts file: a basic guide

I'm relatively new to Angular, but I've been given a project that's built with Angular. As I examine the .ts file containing the list of property types, I need to wrap a span around the label text. Is this doable? Here is the current list ...

Typescript: Potential null object error when defining a method

I recently encountered an error message stating "Object is possibly null" while working on the changePageSize method in book-store.component.html. It seems like I need to initialize the object within the class, but I'm not familiar with how to do that ...

Experiencing problem when using Angular Dart material-input with data type set to number

I am currently in the process of constructing a web application (essentially an e-commerce platform) using Angular Dart and incorporating elements from materialDirectives to create the app's components. My primary focus at the moment is on developing ...

While working on a project that involves TypeScript, Material-UI, and Formik, I encountered an error that originated from

I recently downloaded a project from the following site: https://codesandbox.io/s/gn692 Upon encountering some errors that I couldn't resolve on my own, I decided to download this project to see how it's implemented. Surprisingly, it runs smoothl ...

I'm interested in developing a feature that monitors a specific attribute and triggers a function once that attribute hits the value of 100

I am working on a function that will refresh the view once the percentage changes reaches 100: The value is stored in this variable: this.uploadPercent = task.percentageChanges(); This is the function I plan to implement : refreshView(){ Once this.uplo ...

The click listener triggers a single time when a render method is nested within it

When I have a click listener on a button that resets the innerHTML of a div with a render method, the listener fires every time I click if I take out the render function. However, if the render function is included, the listener does not fire multiple time ...

Encountering a new challenge in Angular: The error "InvalidPipeArgument: '' for pipe 'AsyncPipe'

Whenever I try to fetch data from the server, these errors keep popping up. This code was written by someone else and I would like to improve upon it. Could anyone suggest the best approach to handle this situation? Are there any coding patterns that sho ...

What is the process for incorporating a custom action in TestCafe with TypeScript?

I've encountered an issue while trying to implement a custom action. When running tests with the new custom action, I keep receiving an error stating that my custom action is not recognized as a function. TypeError: testcafe_1.t.customActions.selectFr ...