使用 Angular httpClient 获取用户数据

Question

I want to fetch user data, but I always get null. Here's my route:

router.get('/user', (req,res)=>{ 
  res.send(req.user); 
})

Don't want to go into the details, but on http://localhost:4000/auth/user, I have my user data, when I am logged in.

Here's my web service("framework" to all services) get part :

constructor(private http:HttpClient) { }

  get(uri:string) {
    return this.http.get(`${this.devUri}/${uri}`)
  }

and AuthService(whole, because it's short):

import { Injectable } from '@angular/core';
import { WebService } from './web.service';

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

  constructor(private webService: WebService) { }

  getUser(){
    return this.webService.get('auth/user');
  }
}

And component with this data:

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-public',
  templateUrl: './public.component.html',
  styleUrls: ['./public.component.css']
})
export class PublicComponent implements OnInit {

  user: any;
  constructor(private authService: AuthService) { }
  ngOnInit(): void {
    this.authService.getUser().subscribe( user => {
      this.user = user;
      console.log(user);
    })
  }

}

I am sure, that there is no problem with addresses or typos, but I suspect, that the problem is connected with asynchronism, but I don't know how to fix it.

Answer 1

I think it's server side code issue try changing that as followed.

router.get('/user', (req,res)=>{ 
 res.status(200).json({
   result: true,
   user: 'Test result'
  });
});

And in you component while onInit method add as followed

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-public',
  templateUrl: './public.component.html',
  styleUrls: ['./public.component.css']
})
export class PublicComponent implements OnInit {

  user: any;
  constructor(private authService: AuthService) { }
  ngOnInit(): void {
    this.authService.getUser().subscribe( result => {
      let temp:any = result;
      this.user = temp.user;
      console.log(this.user);
    })
  }

}

Hopefully this should work. Happy Coding!

Answer 2

Found the solution:

In server.js

app.use(
  cors({
    origin: "http://localhost:4200",
    credentials: true
  })
);

In webService.ts:

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  }),
  withCredentials: true 
}
get(uri:string) {
    return this.http.get(`${this.devUri}/${uri}`, httpOptions)
  }

and it's working now.