CODEWITHSUNDEEP
javascriptangulartypescript
WannaBeDev
WannaBeDev

Reputation: 47

subscribe function always going on error observer

I am following a course on Udemy which uses Angular 2.0 and I'm trying to build it using the latest version. My problem occurs in this function :

checkSession() {
const url = 'http://localhost:8181/checkSession';
const xToken = localStorage.getItem('xAuthToken');
const basicHeader = 'Basic ' + localStorage.getItem('credentials');
const headers = new HttpHeaders({
  'x-auth-token' : JSON.stringify(xToken),
  'Authorization' : basicHeader
});
console.log(url);
console.log(headers);
return this.http.get(url, {headers: headers});

because when I access it on this function:

ngOnInit() {
const xToken = JSON.stringify(localStorage.getItem('xAuthToken'));
if (xToken) {
  this.loginService.checkSession().subscribe(
    res => {
      console.log("Good")
      this.loggedIn = true;
    },
    error => {
      console.log("error = " + error)
      this.loggedIn = false;
    }
  );
}

it always going on the error observer throwing this error:

[object Object]

OnSubmit function:
    onSubmit() {
    this.loginService
      .sendCredential(this.credential.username, this.credential.password)
      .subscribe(
        res => {
          localStorage.setItem('xAuthToken', JSON.stringify(res));
          this.loggedIn = true;
          const encodedCredentials = btoa(this.credential.username + ':' + this.credential.password);
          localStorage.setItem('credentials', encodedCredentials);
          // location.reload();
        },
        error => {
          console.log(error);
        }
      );

Original functions from the course:

checkSession() {
let url = "http://localhost:8181/checkSession";

let headers = new Headers ({
  'x-auth-token' : localStorage.getItem('xAuthToken')
});

return this.http.get(url, {headers: headers});

ngOnInit() {
this.loginService.checkSession().subscribe(
    res => {
        this.loggedIn=true;
    },
    error => {
        this.loggedIn=false;
    }
);

onSubmit() {
this.loginService.sendCredential(this.credential.username, this.credential.password).subscribe(
    res => {
        console.log(res);
        localStorage.setItem("xAuthToken", res.json().token);
        this.loggedIn = true;
        // location.reload();
    },
    error => {
        console.log(error);
    }
);

Because of this error, I cannot save the session. The login works like a charm, but for some reason unknown by me, the session is not saved properly.

Network tab: Network screenshot 1

Token

Error

checkSession

Upvotes: 1

Views: 79

Answers (3)

Paul
Paul

Reputation: 478

It looks like you are trying to stringify the variable (xToken) that you get from local storage. The problem is that the get method from local storage returns a string so when you set your HttpHeaders, it will throw an error on the JSON.stringify(xToken) line.

Upvotes: 1

Abhishek Priyadarshi
Abhishek Priyadarshi

Reputation: 581

Please update function as below

checkSession() {
        const url = 'http://localhost:8181/checkSession';
        const xToken = localStorage.getItem('xAuthToken');
        const basicHeader = 'Basic ' + localStorage.getItem('credentials');
        const headers = new HttpHeaders({
          'x-auth-token' : JSON.stringify(xToken),
          'Authorization' : basicHeader
        });
        console.log(url);
        console.log(headers);
        return this.http.get(url, {headers: headers, responseType: 'text'});
    }

Upvotes: 2

laiju
laiju

Reputation: 1373

The response type from server will be text instead of json which will be causing the issue. try setting the header as text

return this.http.get(url, {headers, responseType: 'text'});

Upvotes: 2

Related Questions