时间戳

首页 > 解决方案 > 登录后刷新头部组件

angular - 登录后刷新头部组件

问题描述

我的应用程序使用身份服务器，一旦重定向回来，我会将用户名存储在会话变量中。

名称没有显示，只有当我刷新页面时才会显示。如何纠正这个？

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { environment } from '../../environments/environment';

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.css"]
})
export class HeaderComponent implements OnInit {
  navLinks: any[];
  activeLinkIndex = -1;
  displayName: string;
  logoutUrl: string;

  constructor(private router: Router) {
    this.navLinks = [
      {
        label: "Projects",
        link: "project-list",
        index: 0
      }
    ];    
  }
  ngOnInit(): void {
    this.router.events.subscribe(res => {
      this.activeLinkIndex = this.navLinks.indexOf(
        this.navLinks.find(tab => tab.link === "." + this.router.url)
      );
    });

    this.displayName = sessionStorage.getItem("displayName");
    this.logoutUrl = environment.oidc_post_logout_redirect_uri;
  }
}

<button mat-button [matMenuTriggerFor]="menu">{{ displayName }}</button>

标签： angular

解决方案

你还没有说你是如何执行登录的，所以为了这个答案的目的，我假设你正在一个名为loginService.

您可以在登录服务中创建一个主题，该主题在每次身份验证状态更改时发出一个值。每次用户登录或注销时，登录服务都会发出一个新值，通知订阅者新状态。

所有感兴趣的组件，例如标题组件，都可以订阅该主题以接收有关登录状态的更新。

登录服务

// I am using a replay subject here to ensure new subscribers get the current status
private loggedIn: Subject<boolean> = new ReplaySubject<boolean>(1);

login(): Observable<boolean> {
  // TODO: set up http request
  return this.http.post(loginUrl, body).pipe(
    tap(() => this.loggedIn.next(true)
  );
}

logout(): Observable<boolean> {
  return this.http.post(loginUrl, body).pipe(
    tap(() => this.loggedIn.next(false)
  );
}

loginStatusChange(): Observable<boolean> {
  return this.loggedIn.asObservable();
}

标头组件

ngOnInit(): void {
  this.loginService.loginStatusChange().subscribe(loggedIn => {
    // TODO: apply logic based on logged in status
  });
}

这是非常简单的，并且只关注设计模式的方面。我忽略了您通常会添加的那种实现细节，例如错误处理和取消订阅主题。

推荐阅读