Anglular 6 authentication to CRUD RestAPI set headers

[a.kr...@ich-selber.de]

Hi @all,

I´m very new to Angular CLI an Programming. I hope for  some help on this Problem.

I have this Code

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

import { environment } from '../../environments/environment';

@Injectable()
export class AuthenticationService {
    constructor(private http: HttpClient) { }

    login(username: string, password: string) {
        const headers = new Headers();
headers.append('Content-Type','application/json');
headers.append('appkey','123');


        return this.http.post<any>(`${environment.apiUrl}/login`, { user: username, pass: password }, { headers: headers})
       
            .pipe(map(data => {
                // login successful if there's a jwt token in the response
                if (data && data.sessionID) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(data));
                }

                return data;
            }));
    }

    logout() {
        // remove user from local storage to log user out
        localStorage.removeItem('data');

    }
}

What I try is to set Headers (e.g. 'appkey':'123') but I get this error:

Argument of type '{ headers: Headers; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
  Types of property 'headers' are incompatible.
    Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'.
      Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'.
        Index signature is missing in type 'Headers'.

How to solve this?

Thanks for ur Help

Greetings from Germany

Alex

[Zlatko Đurić]

Hi Alex,

Two things. First, as the error tells you, you need to use HttpHeaders, not Headers. See here from your example:

On Tuesday, August 7, 2018 at 7:02:01 PM UTC+2, a.kr...@ich-selber.de wrote:

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

        const headers = new Headers();

You import HttpHeaders from Angular, and then use Headers (native to browsers). You could mix them, but it's safer to use Angular's classes in Angular environment, due to various reasons outside of the scope here.

So use const headers = new HttpHeaders(); instead.

The other problem - HttpHeaders (the class from Angular import, the one you actually need) is immutable. So you have to change this: 

const headers = new HttpHeaders();

headers.append('appkey', '123');

Into this:

let headers = new HttpHeaders();

headers = headers.set('appkey', '123');

// or chain them all together this way:

const headers = new HttpHeaders().set('appkey', '123').set('Content-Type', 'application/json');

Anything you append to headers later in your code will not actually be added.

Zlatko

[a.kr...@ich-selber.de]

Hi Zlatko,

thanks for spending time in my question.

your soloution works fine for me

Kind regards

Alex