Получение пользовательских данных с помощью Angular HttpClient

#javascript #angular #get #request #httpclient

#javascript #angular #получить #запрос #httpclient

Вопрос:

Я хочу получить пользовательские данные, но я всегда получаю null. Вот мой маршрут:

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

Не хочу вдаваться в подробности, но на http://localhost:4000/auth/user , У меня есть мои пользовательские данные, когда я вхожу в систему.

Вот моя веб-служба («фреймворк» для всех служб) получает часть :

 constructor(private http:HttpClient) { }

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

и AuthService(целиком, потому что оно короткое):

 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');
  }
}

И компонент с этими данными:

 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);
    })
  }

}

Я уверен, что нет проблем с адресами или опечатками, но я подозреваю, что проблема связана с асинхронностью, но я не знаю, как это исправить.

1. На самом деле, асинхронный код правильный, то немногое, что здесь есть. Посмотрите на вкладку «Сеть» вашего инструмента разработки и убедитесь, что ответ от сервера содержит данные.

2. Вы убедились, что включили cors на стороне сервера? Вы можете проверить это, заглянув на вкладку «Сеть».

3. конструктор (частный http:HttpClient ) { }, назначьте переданный HttpClient этому файлу.http.

Ответ №1:

Я думаю, что это проблема с кодом на стороне сервера, попробуйте изменить это следующим образом.

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

И в вашем компоненте при использовании метода OnInit добавьте следующее

 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 = resu<
      this.user = temp.user;
      console.log(this.user);
    })
  }

}

Надеюсь, это должно сработать. Счастливого кодирования!

1. Свойство ‘user’ не существует для типа ‘Object’. Я получил только результат: true, когда я console.log(результат)

2. Да, да, вы поместили req.user в ответ правильно, это не req.user, это может быть req.body.user, и вы также можете попробовать добавить тестовую строку, например, hello world, в ответ пользователя.

3. Теперь это не определено

4. Я нашел решение. Мне просто нужно было включить учетные данные. Смотрите Ответ выше.

Ответ №2:

Найдено решение:

В server.js

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

В WebService.ts:

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

и сейчас это работает.