Angular - Get data using basic auth

Question

I have been working with angular 6.0.0. I have a REST API with basic auth and it works fine on Postman but it gives an error in my service as below

401 (Unauthorized)

Here is my code:-

import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import { struct_paket } from './data';

@Injectable({
  providedIn: 'root'
})
export class AppserviceService {

  constructor(private http: Http) { }
  auth(headers: Headers) {
    headers.append('Authorization', 'Basic ' +
      btoa('admin:310b5678eece63336e4698d2722aad91'));
  }

  getpaket() {
    let headers = new Headers();
    this.auth(headers);

    return  this.http.get('www.example.com/api', {
      headers: headers
    }).map(res => res.json() as struct_paket );


  }
}

UPDATE

service.ts

export class AppserviceService {

constructor(private http: HttpClient) {}

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization:
        'Basic YWRtaW46MzEwYjU2NzhlZWNlNjMzMzZlNDY5OGQyNzIyYWFkOTE='
    })
  };
  get() {
    return this.http.get<struct_paket>('http:www.example.com/api', this.httpOptions)
  }
}

and call it in component.ts

this._service.get()
    .subscribe(x=>
      {
        this.Pakets = x
      },error =>{console.log(error);}
    );

angular/cli version : "6.0.8" @baj9032 sorry forgot about that — Shaugi
– Shaugi, Commented Jul 7, 2018 at 3:22

Debojyoti · Accepted Answer · 2018-07-07 07:04:04Z

1

Update headers after appending

Try

import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import { struct_paket } from './data';

@Injectable({
  providedIn: 'root'
})
export class AppserviceService {
  headers : Headers;
  constructor(private http: Http) { }
  auth() {
    this.headers = this.headers.append('Authorization', 'Basic ' +
      btoa('admin:310b5678eece63336e4698d2722aad91'));
  }

  getpaket() {
    this.headers = new Headers();
    this.auth();

    return  this.http.get('www.example.com/api', {
      headers: headers
    }).map(res => res.json() as struct_paket );


  }
}

edited Jul 7, 2018 at 7:04

answered Jul 7, 2018 at 6:49

Debojyoti

4,8713 gold badges25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shaugi Over a year ago

its not working type 'void' is not assignable to type 'Headers'

baj9032 · Accepted Answer · 2018-07-09 06:21:43Z

1

Headers is now moved to '@angular/common/http' and name is also changed Headers to HttpHeaders.

Example:

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class TestService {
  constructor(private http: HttpClient) {}

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization':'Basic' +  btoa('admin:310b5678eece63336e4698d2722aad91'))
    })
  };
  call() {
    return this.http
      .get<struct_paket>('www.example.com/api', this.httpOptions)
  }
}

edited Jul 9, 2018 at 6:21

answered Jul 7, 2018 at 3:31

baj9032

2,5923 gold badges25 silver badges41 bronze badges

5 Comments

Shaugi Over a year ago

const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': 'Basic YWRtaW46MzEwYjU2NzhlZWNlNjMzMzZlNDY5OGQyNzIyYWFkOTE=' }) }; return this.http.get('www.example.com/api', { headers: httpOptions }).map(res => res.json() as struct_paket );

but i got error argument of type {headers : httpHeaders;} is not assignable to parameter of type requestOptionsArgs

baj9032 Over a year ago

change constructor(private http: Http) { } to constructor(private http: HttpClient) { } and import HttpClient from import { HttpClient } from '@angular/common/http';

Shaugi Over a year ago

still got error like this argument of type {headers : httpHeaders;} is not assignable to parameter of type requestOptionsArgs

baj9032 Over a year ago

I have Updated my ans.

Shaugi Over a year ago

still get error 401 i call service funtion like this `this._service.call() .subscribe(x=> { this.Pakets = x },error =>{console.log(error);} );'

Collectives™ on Stack Overflow

Angular - Get data using basic auth

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related