Angular如何实现登录页隐藏头部与侧边栏 登录成功后再显示

解决方案 #

你已经在代码中定义了isUserLoggedIn状态变量，只需要做以下几处调整即可实现需求：

1. 修改app.component.html

给头部组件加登录状态判断，未登录时直接不渲染整个头部组件：

<!-- header -->
<div class="header">
  <app-page-header *ngIf="isUserLoggedIn"></app-page-header>
</div>
<!-- / header -->

你当前内容区的[ngClass]配置已经可以实现「未登录时取消内边距、让登录页全屏展示」的效果，无需额外修改。

2. 修改page-header.ts

调整初始化逻辑和登录状态监听逻辑，避免未登录时操作侧边栏报错：

ngOnInit() {
  this.isNav = true;
  this.navigation = WEB_MENU_LIST;
  this.subscribeToLoginUpdates();
  // 初始化时根据登录状态控制侧边栏显隐
  this.m();
}

subscribeToLoginUpdates(): void {
  this.authService.$loginStateChanged
    // .pipe(takeUntil(this.destroyed$))
    .subscribe(e => {
      this.isUserLoggedIn = this.authService.isUserLoggedIn;
      // 登录状态变化时触发侧边栏状态更新
      this.m();
    });
}

3. 调整page-header.html（可选优化）

如果需要更彻底的隐藏，避免未登录时残留头部占位，可以给整个.page-header节点加判断，同时调整内容区的类规则：

<!-- 整个头部区域只在登录后渲染 -->
<div class="page-header" *ngIf="isUserLoggedIn">
  <!-- 原有内部代码保持不变 -->
</div>
<!-- 内容区类只在登录后应用侧边距 -->
<div class="main-page mx-4" [ngClass]="isUserLoggedIn ? {'main-page-side-bar': !stopToggle && isNav, 'page-side': stopToggle} : {}">
  <router-outlet></router-outlet>
</div>

调整完成后，未登录状态下头部和侧边栏不会渲染，登录成功后$loginStateChanged会触发状态更新，自动显示头部和侧边栏。

内容的提问来源于stack exchange，提问作者RevanthReddySince1998