Angular 5：未认证用户隐藏导航栏元素功能失效求助

我来帮你梳理下当前代码的问题，然后一步步搞定这个登录状态不更新、刷新后丢失的问题：

先说说你现有代码的核心问题： #

1. AuthenticationService的isloggedin方法没正确返回异步结果：你在方法里调用了http.get，但没有返回这个Promise，导致组件里拿到的是undefined
2. 组件错误调用服务方法：你直接用AuthenticationService.isloggedin()调用静态方法，但这个服务是需要依赖注入的实例方法，而且完全没处理异步返回值
3. 没做状态持久化：页面刷新后，内存里的loggedin变量会重置，得用localStorage来保存登录状态

第一步：重构AuthenticationService #

先把服务改得靠谱点，让它能正确返回登录状态，同时处理本地存储：

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { BehaviorSubject, Observable, tap } from 'rxjs';

@Injectable()
export class AuthenticationService {
  // 用BehaviorSubject保存登录状态，方便组件订阅实时更新
  private loggedInStatus = new BehaviorSubject<boolean>(this.getStoredLoginStatus());

  constructor(private http: HttpClient) {}

  // 从localStorage读取之前保存的登录状态
  private getStoredLoginStatus(): boolean {
    return localStorage.getItem('isLoggedIn') === 'true';
  }

  // 供组件订阅的登录状态Observable
  get isLoggedIn$(): Observable<boolean> {
    return this.loggedInStatus.asObservable();
  }

  // 检查后端登录状态，并同步更新本地状态
  checkBackendLoginStatus(): Observable<boolean> {
    return this.http.get<boolean>('/loggedin').pipe(
      tap(isLoggedIn => {
        this.updateLoginStatus(isLoggedIn);
      })
    );
  }

  // 更新登录状态（登录/登出时调用）
  updateLoginStatus(isLoggedIn: boolean): void {
    localStorage.setItem('isLoggedIn', isLoggedIn.toString());
    this.loggedInStatus.next(isLoggedIn);
  }

  // 登出方法（按需添加）
  logout(): void {
    this.updateLoginStatus(false);
    // 这里可以加后端登出的请求逻辑
  }
}

第二步：修复AppComponent #

现在组件里正确注入服务，订阅登录状态：

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from "../../services/authentication/authentication.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'twittscheR';
  // 直接使用服务的Observable，让模板通过async管道处理
  loggedIn$ = this.authService.isLoggedIn$;

  constructor(private authService: AuthenticationService) {}

  ngOnInit(): void {
    // 页面加载时检查后端登录状态，确保本地状态和后端同步
    this.authService.checkBackendLoginStatus().subscribe();
  }
}

第三步：修改模板，用async管道处理Observable #

因为我们用了Observable，模板里直接用async管道就能自动订阅和更新，这样*ngIf就能实时响应状态变化：

<nav class='navbar navbar-default'>
  <div class='container-fluid'>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" routerLink=""></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class='nav navbar-nav navbar-left'>
        <li><a *ngIf="(loggedIn$ | async)" routerLink="/posts">Posts</a></li>
        <li><a routerLink="/profile">Profile</a></li>
        <li><a *ngIf="(loggedIn$ | async)" routerLink="/settings">Settings</a></li>
        <li><a *ngIf="!(loggedIn$ | async)" routerLink="/register">Register</a></li>
        <li><a *ngIf="!(loggedIn$ | async)" routerLink="/login">Login</a></li>
        <li><a routerLink="/administration">Administration</a></li>
      </ul>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

第四步：登录成功后更新状态 #

在你的登录组件里，登录成功后调用AuthenticationService的updateLoginStatus(true)，这样导航栏的状态会自动更新：

比如登录组件里的登录逻辑：

login(user: any): void {
  this.http.post('/login', user).subscribe(
    (response) => {
      // 登录成功后更新状态
      this.authService.updateLoginStatus(true);
      // 跳转到首页或其他页面
      this.router.navigate(['/']);
    },
    (error) => {
      // 处理登录失败逻辑
    }
  );
}

这样做的好处：

• 用BehaviorSubject能让所有订阅的组件实时收到状态更新
• localStorage保存状态，页面刷新后会自动读取恢复
• async管道自动处理订阅和取消订阅，避免内存泄漏
• 后端状态和本地状态同步，确保一致性

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