Angular 如果用户已登录，请更改组件

使用基于JWT的实现和Angular 6，根据用户是否登录隐藏/显示组件的最佳方式是什么？如果有一个包含用户相关信息的可观察用户对象就好了。这需要警卫吗

后端使用的是.NET Core 2.1，不确定这是否会产生影响。这段代码大部分是从我用来学习Angular的Angular Firebase项目中提取的，但出于几个原因，我切换到了.NET Core。能够实时更新使用各种Angular+Firebase魔法的用户，真是太好了。不确定如何为.NET Core重新调整其用途

登录和注销功能确实有效，只是为了简洁起见，不包括这些组件的详细信息

以下是我到目前为止的情况：

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Router } from "@angular/router";
import { Observable } from 'rxjs';

interface User {
  email: string;
  password: string;
}

@Injectable()
export class AuthService {

  user: Observable<User>;
  invalidLogin: boolean;

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

  login(e: string, p: string) {
    let credentials = { email: e, password: p}
    this.http.post("https://localhost:44368/api/auth/login", credentials, {
      headers: new HttpHeaders({
        "Content-Type": "application/json"
      })
    }).subscribe(response => {
      let token = (<any>response).token;
      localStorage.setItem("jwt", token);
      this.invalidLogin = false;
      this.router.navigate(["/dashboard"]);
      console.log('Access granted.');
    }, err => {
      this.invalidLogin = true;
      console.log('Access denied.');
    });
  }

  logout() {
    localStorage.removeItem("jwt");
    this.router.navigate(["/"]);
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“@angular/Router”导入{Router}”；
从“rxjs”导入{Observable}；
界面用户{
电子邮件：字符串；
密码：字符串；
}
@可注射（）
导出类身份验证服务{
用户：可观察；
invalidLogin：布尔型；
建造师(
私有http:HttpClient，
专用路由器
) { }
登录（e:string，p:string）{
让凭据={email:e，密码：p}
这是http.post（“https://localhost:44368/api/auth/login“、全权证书、{
标题：新的HttpHeaders({
“内容类型”：“应用程序/json”
})
}).订阅（响应=>{
让令牌=（响应）.token；
setItem（“jwt”，令牌）；
this.invalidLogin=false；
this.router.navigate（[“/dashboard”]）；
console.log（“已授予访问权”）；
}，err=>{
this.invalidLogin=true；
log（“访问被拒绝”）；
});
}
注销（）{
localStorage.removietem（“jwt”）；
这个.router.navigate（[“/”]）；
}
}

my.component.html

<div *ngIf="auth.user | async; then authenticated else guest">
  <!-- Template will replace this div -->
</div>

<ng-template #guest>
  <p>Guest</p>
</ng-template>

<ng-template #authenticated>
  <p>Authenticated</p>
</ng-template>

客人

认证

将此代码添加到AuthService:

private user = new Subject<User>();
public userEmitter = this.user.asObservable();
userEmitChange(usr: User) {
    this.user.next(usr);
}

现在使用此变量所有组件如下：

constructor(private authService: AuthService) {
  this.authService.userEmitter.subscribe(user => {
    this.user = user;
  });

  this.user = JSON.parse(localStorage.getItem('currentUser'));
}

---

func内部的构造函数侦听用户对象及其更改数据，将新值设置为组件变量。

它属于订阅中的登录组件。您将把入口组件几乎粘贴在那里。请不要忘记代码“private authService:authService”中的构造函数

constructor(private authService: AuthService) {
  this.authService.userEmitter.subscribe(user => {
    this.user = user;
  });

  this.user = JSON.parse(localStorage.getItem('currentUser'));
}