Как подойти к нескольким асинхронным запросам от серверной части в Angular 6?

Question

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

У меня есть 3 компонента: родительский - дочерние компоненты AppComponent - LoginComponent, NavbarComponent, DashboardComponent, MainComponent, SidebarComponent

и один AuthService

При нажатии кнопки «Войти» в компоненте ведения журналаМне нужно передать логическое «истинное» значение для всех компонентов.При нажатии кнопки «Выйти» на компоненте панели навигации мне нужно передать логическое значение «false» всем компонентам и установить user = null

, если true ->

1. setтокен в localStorage с идентификатором пользователя

2. preform http.get ("http://localhost:3000/user/"+id) запрос на получение полной информации о пользователе и добавление информации о пользователе в Dashboard, Main, Sidebar, App и Navbarкомпоненты.

Проблема заключается в том, что всякий раз, когда я выхожу из системы, значение false / true обновляется сразу для всех компонентов, но информация пользователя не становится пустой, если я не обновлю страницу или не отправлю ее с маршрутизатором.в другой компонент, а затем вернитесь в MainComponent, то же самое с новым логином.

Как мне сразу обновить информацию о пользователе и статус во всех компонентах, не обновляя страницу?

authService:

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Router } from "@angular/router";

import { User } from "../models/User";

@Injectable({ providedIn: "root" })
export class AuthService {
  user: User;
  private _url = "http://localhost:5000/user/";

  constructor(private http: HttpClient, private _router: Router) {}

  registerUser(user) {
    return this.http.post<any>(this._url + "register", user);
  }

  loginUser(user) {
    return this.http.post<any>(this._url + "login", user);
  }

  logoutUser() {
    localStorage.clear();
    this._router.navigate(["/"]);
  }

  loggedIn() {
    return !!localStorage.getItem("token");
  }

  getToken() {
    return localStorage.getItem("token");
  }

  getCurrentUser() {
    return this.http.get<any>("http://localhost:5000/shop/current");
  }
}

Компонент Main / Sidebar:

import { Component, OnInit, DoCheck } from "@angular/core";

import { AuthService } from "src/app/services/auth.service";

import { User } from "src/app/models/User";

@Component({
  selector: "app-sidebar",
  templateUrl: "./sidebar.component.html",
  styleUrls: ["./sidebar.component.css"]
})
export class SidebarComponent implements OnInit, DoCheck {
  isSidenavOpen: boolean = true;
  user: User;

  constructor(private _authService: AuthService) {}

  ngOnInit() {
    if (this._authService.loggedIn()) this._authService.getCurrentUser().subscribe(res => (this.user = res.user));
    else this.user = null;
  }

  ngDoCheck() {
    if (!this._authService.loggedIn()) this.user = null;
  }
}

логин:

  constructor(private _authService: AuthService, private _router: Router) {}



  // onLoginUser() {
  //   this._authService.loginUser(this.loginUserData).subscribe(
  //     res => {
  //       localStorage.setItem("token", res.token);
  //       localStorage.setItem("user", res.user._id);
  //       this._router.navigate(["/"]);
  //     },
  //     err => console.log(err)
  //   );
  // }
}

Answer 1

Используйте событие EventEmitter до emit event при входе в систему, выходе из системы и т. Д. И прослушивайте каждый компонент, который зависит от пользовательских данных.

В службе, где вы вызываете logoutUser, loginUser методы AuthService:

// LoginService
userLoggin: EventEmitter<User> = new EventEmitter();
userLoggout: EventEmitter<any> = new EventEmitter();

constructor(private _authService: AuthService, private _router: 
Router) {}

loginUser() {
  this._authService.loginUser(this.loginUserData).subscribe(
    res => {
      localStorage.setItem("token", res.token);
      localStorage.setItem("user", res.user._id);
      this.userLoggin.emit(res.user);
      this._router.navigate(["/"]);
    },
    err => console.log(err)
    );
  }

  logoutUser() {
  this._authService.logoutUser().subscribe(
    res => {
      this.userLoggout.emit();
    },
    err => console.log(err)
    );
  }
}

Затем в компоненте:

import { Component, OnInit, DoCheck } from "@angular/core";

import { AuthService } from "src/app/services/auth.service";

import { User } from "src/app/models/User";

import { LoginService } from "src/app/services/login.service";

@Component({
  selector: "app-sidebar",
  templateUrl: "./sidebar.component.html",
  styleUrls: ["./sidebar.component.css"]
})
export class SidebarComponent implements OnInit, DoCheck {
isSidenavOpen: boolean = true;
user: User;
loggin$: Subscription;
logout$: Subscription;

  constructor(private _authService: AuthService, private _loginService: LoginService) {
    this.loggin$ = this._loginService.userLoggin.subscribe(user => {
      this.user = user;
    });

    this.logout$ = this._loginService.userLoggout.subscribe(user => {
      this.user = null;
    });
  }

  ngOnInit() {
  }

  ngOnDestroy() {
    this.loggin$.unsubscribe();
    this.logout$.unsubscribe();
  }
}