Parsing the header parameter in a GET request from Angular within the Spring backend

Recently, I delved into Rest services in Spring and learned from a tutorial that sending parameters to the backend can be done securely through the following method:

getCompanyDetails(username:string): Observable<CompanyObject>{
    const headers = new HttpHeaders({Authorization: 'Basic '+btoa(username)})
    return this.http.get<CompanyObject>("http://localhost:8080/company/getCompany",{headers:headers});
}

I am now seeking assistance on how to extract the username at the backend. Although my code successfully reads the "authorization" part, the username remains encoded. Is there a direct way to access this username? Below is my backend code for reference. Thank you.

@GetMapping("company/getCompany")
private void getCompany(@RequestHeader("authorization") HttpHeaders header){
    System.out.println(header);
}

Answer №1

Before adding the username to the header in your Angular code, you pass it through a function called btoa(). It seems like this function encodes the username using a specific algorithm. The response handlers in the springboot backend will not automatically decode any manually added content by a developer. Instead, they handle extracting headers from requests and decoding them when necessary, especially for standard encryptions like those used with https. However, if your Authorization value includes 'Basic' followed by some encoded value, you will need to manually decode it once you receive the value from the header at the controller.

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

Access exclusive content by subscribing now!

How can I return a reference to a subject from a service without allowing the receiver to call .next() on the subject? Let's say there is a service with a subject that triggers new events. class ExampleService { private exampleSubject = new Subjec ...

Ways to automatically close the external window upon logging out in Angular 12

I have successfully created an external window in my Angular application. Everything is working as expected, but I am facing an issue when trying to automatically close the external window upon user logout. Although I have written the code below and it wo ...

Switching over to Typescript: Sending mapped properties

I'm having trouble converting my React.JS script to TypeScript. I need assistance in creating a drop-down navigation bar on my website. Here's a snippet from my Header.tsx file: The error message Property 'onClick' does not exist on t ...

Difficulty with AMCharts Map displaying in production environment

I have successfully created an Angular application using AMCharts Map. During development mode (ng serve), the map renders correctly. Even when building the app without production mode (using the command ng build), the map displays as expected. However, ...

The Swagger-ui tool condenses objects into query parameters, while the angular client that it generates does not

I'm currently working on a Spring Boot application that includes the following Rest function: @SecuredMaster @GetMapping(path = "/mitarbeiter") @Operation(security = {@SecurityRequirement(name = "jwt")}) public Page<MitarbeiterListRow> getMitar ...

Creating a Jest TypeScript mock for Axios

Within a class, I have the following method: import axios from 'axios' public async getData() { const resp = await axios.get(Endpoints.DATA.URL) return resp.data } My aim is to create a Jest test that performs the following actions: jes ...

What steps can be taken to resolve the error message "Module '../home/featuredRooms' cannot be found, or its corresponding type declarations"?

Upon deploying my site to Netlify or Vercel, I encountered a strange error. The project runs smoothly on my computer but seems to have issues when deployed. I am using TypeScript with Next.js and even attempted renaming folders to lowercase. Feel free to ...

Implementing Angular 2 reactive forms checkbox validation in an Ionic application

I have implemented Angular Forms to create a basic form with fields for email, password, and a checkbox for Terms&Conditions in my Ionic application. Here is the HTML code: <form [formGroup]="registerForm" (ngSubmit)="register()" class="center"> ...

The firebase.d.ts on iOS functions properly, whereas on Android, it becomes

Currently, I am working with Ionic 2 on my Mac system. Your system information: Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.4 Ionic CLI Version: 2.1.18 Ionic App Lib Version: 2.1.9 Ionic App Scripts Version: 1.0.0 ios-deploy version: Not instal ...

Leverage the power of Angular 2 components within your Asp.net MVC

I am currently working on an Asp Mvc project which utilizes Angular 1.4 for the frontend. While my project is not designed to be a single page application, I am interested in incorporating Angular 2 without transitioning the entire project into a SPA. Aft ...

agm-polygon fails to refresh with new points added

I've recently switched from using Google maps to AgmMaps and wanted to create a simple demo for drawing polygons on the map. Here's what I added to my project: You can find the stackblitz link with the code here <agm-polygon [strokeColor]="& ...

"Enable email delivery in the background on a mobile app without relying on a server

I am currently in the process of developing a mobile app using Ionic. One feature I would like to incorporate is sending an email notification to admins whenever a post is reported within the app. However, I am facing challenges with implementing this succ ...

Why does the data appear differently in Angular 9 compared to before?

In this particular scenario, the initial expression {{ bar }} remains static, whereas the subsequent expression {{ "" + bar }} undergoes updates: For example: two 1588950994873 The question arises: why does this differentiation exist? import { Com ...

Is it possible to pass a Styled Components Theme as Props to a Material UI element?

After spending 9 hours scouring the internet for a solution, I am at my wit's end as nothing seems to work. Currently, I am developing a React component using TypeScript. The issue lies with a simple use of the Material UI Accordion: const Accordion ...

Customizing tsconfig.json: Enhancing an existing object by adding new keys in TypeScript

Is it possible to achieve the following functionality by default? let j = {a:1}; j.b = 2; I am aware that there are alternative solutions, but I am curious if this specific task can be accomplished by solely modifying tsconfig.json? ...

Tips for integrating jwt token into axios request

I am facing an issue with my backend endpoint. I can successfully retrieve a list of customers using jwt token on Postman, but when I try to fetch the list from a React app using axios get request, it fails. After reading through this question, I implemen ...

What is the best way to combine index signatures with established properties?

Imagine a scenario where an interface has certain defined properties with specific types, but can also include additional properties with unknown keys and various other types. Here is an example: interface Bar { size: number; [key: string]: boolean | s ...

Encountering an error in Angular Material Table: Unable to define property 'filterPredicate' for undefined object

I am facing an issue with my Angular Material Table that has client-side filtering. The problem arose when I switched to retrieving data from a service instead of using hardcoded data. Now, I am receiving an error message saying: "Cannot set property &apos ...

Issue: Prior to initiating a Saga, it is imperative to attach the Saga middleware to the Store using applyMiddleware function

I created a basic counter app and attempted to enhance it by adding a saga middleware to log actions. Although the structure of the app is simple, I believe it has a nice organizational layout. However, upon adding the middleware, an error occurred: redu ...

The metadata version discrepancy has been detected for the module located at C:/xampp/htdocs//node_modules/angular2-flash-messages/module/index.d.ts

While working with Angular 4, I encountered an error after trying to install angular2-flash-messages using npm with the following command: npm install angular2-flash-messages --save The error I encountered can be viewed in the following image: enter im ...