如何在Angular 6中处理来自后端的多个异步请求？

Question

我对Angular很陌生，很难掌握如何处理异步请求。

我有3个组件：父组件-AppComponent子组件-LoginComponent、NavbarComponent、仪表板组件、MainComponent、SidebarComponent

和一个AuthService

在日志组件上按“Login”按钮时，我需要将布尔值“true”传递给所有组件。在按下导航栏组件上的“注销”按钮时，我需要将布尔值“false”传递给所有组件，并设置user=null

如果是真的-

>

在本地存储中设置带有用户ID的令牌

预成型http。得到（”http://localhost:3000/user/“id）请求检索完整的用户信息，并将用户信息注入仪表板、主、侧栏、应用程序和导航栏组件。

问题是，每当我注销所有组件上的假/真值更新时，用户信息不会变成空，除非我刷新页面或将其与路由器一起发送到另一个组件，然后返回到Main Component，与新登录相同。

如何在不刷新页面的情况下立即更新所有组件中的用户信息和状态？

授权服务：

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

主/侧栏组件：

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在登录、注销等时发出事件并监听每个组件，这取决于用户数据。

在服务中，您可以调用logoutUser，logiuserAuthService的方法：

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