Angular中基于用户登录状态控制导航元素显隐的实现咨询

Hey there! Coming from Express, I totally get why you’re looking for a "session variable" equivalent to track login state in Angular. Let’s break down how to make this work with your existing Firebase Auth setup, and get that navbar showing/hiding buttons correctly.

1. 先完善AuthService，实现用户状态监听 #

Firebase Auth本身就提供了登录/登出状态的监听机制，我们只需要把它包装成Observable，让组件能实时响应状态变化。更新你的AuthService：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { User } from 'firebase/auth';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  // 这个Observable会在用户状态变化时，发射当前用户（或null）
  public user$: Observable<User | null>;

  constructor() {
    // 初始化Auth状态监听
    this.user$ = new Observable(observer => {
      firebase.auth().onAuthStateChanged(user => {
        observer.next(user);
      });
    });
  }

  // 保留你原有的doLogin方法
  doLogin(value){
    return new Promise<any>((resolve, reject) => {
      firebase.auth().signInWithEmailAndPassword(value.email, value.password)
      .then(res => resolve(res), err => reject(err))
    })
  }

  // 添加登出方法，后续会用到
  doLogout() {
    return firebase.auth().signOut();
  }

  // 保留你原有的第三方登录方法（Facebook/Twitter/Google）
}

如果你用的是AngularFire（官方Angular-Firebase封装库），可以简化监听逻辑：

// AngularFire版本的监听写法
import { AngularFireAuth } from '@angular/fire/compat/auth';

constructor(private afAuth: AngularFireAuth) {
  this.user$ = this.afAuth.authState;
}

2. 把AuthService和AppComponent关联起来 #

现在需要让AppComponent获取用户状态，这样导航栏模板的*ngIf判断才能生效。这里有两种简单的实现方式：

方式A：在组件中手动订阅Observable

更新你的AppComponent，跟踪用户状态：

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../core/auth.service';
import { User } from 'firebase/auth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  user: User | null = null;

  constructor(private authService: AuthService) {}

  ngOnInit() {
    // 订阅用户状态变化，更新组件内的user变量
    this.authService.user$.subscribe(user => {
      this.user = user;
    });
  }
}

你的导航栏模板已经写好了*ngIf="!user"和*ngIf="user"的判断，现在可以直接生效。

方式B：使用async管道（更简洁，无需手动管理订阅）

如果你不想在组件里定义变量，可以直接在模板中用Angular的async管道，它会自动处理订阅和取消订阅（避免内存泄漏）：

修改app.component.html中的导航项：

<li class='nav-item' *ngIf='!(authService.user$ | async)'>
  <a class='nav-link' routerLink="/login">Zaloguj</a>
</li>
<li class='nav-item' *ngIf='!(authService.user$ | async)'>
  <a class='nav-link' routerLink="/register">Zarejestruj</a>
</li>
<li class='nav-item' *ngIf='authService.user$ | async'>
  <a class='nav-link' routerLink="/logout">Wyloguj</a>
</li>

这种方式下，AppComponent里不需要额外写订阅逻辑，管道会完成所有工作。

3. 实现登出功能 #

别忘了让/logout路由生效！创建一个LogoutComponent，调用AuthService的登出方法：

import { Component } from '@angular/core';
import { AuthService } from '../core/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'page-logout',
  templateUrl: 'logout.component.html'
})
export class LogoutComponent {
  constructor(private authService: AuthService, private router: Router) {
    // 组件加载时立即执行登出，然后跳转到首页
    this.authService.doLogout().then(() => {
      this.router.navigate(['/']);
    });
  }
}

为什么这比“会话变量”更适合Angular？ #

和Express（会话存储在服务器端）不同，Angular是客户端框架，我们依赖客户端状态管理：

• Firebase Auth会把用户的认证令牌存储在本地（localStorage或cookie），所以刷新页面后登录状态会自动恢复
• authState监听能让UI实时同步任何状态变化（登录、登出、令牌过期）
• 用Service保存用户状态，意味着应用中任何组件都能访问登录状态，而不只是导航栏

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