Angular应用登录状态持久化与UI实时更新问题排查

问题根源 #

你当前的login方法仅将JWT存入localStorage，但没有更新tokenSubject的状态。组件订阅的token Observable依赖Subject的next()方法触发值变化，因此登录后UI无法收到更新通知，只有刷新页面时构造函数读取localStorage才会同步状态。

修复步骤 #

1. 修正login方法，更新Subject状态

在login的map操作符中添加tokenSubject.next()，将新token推送给所有订阅者：

@Injectable({
  providedIn: 'root',
})
export class UserService {
  // ... 其他代码保持不变

  login(login: Login): Observable<UserToken> {
    return this.http.post<UserToken>(`${environment.apiUrl}/login`, login).pipe(
      map((token) => {
        console.log('token', token);
        localStorage.setItem('token', token.token);
        this.tokenSubject.next(token.token); // 关键：推送新token到Subject
        this.router.navigate(['/test']);
        return token;
      })
    );
  }

  // ... logout方法已正确更新Subject，无需修改
}

2. （可选）封装登录状态Observable（简化组件逻辑）

在UserService中直接封装isLoggedIn$，避免组件里做!token的判断：

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private tokenSubject = new BehaviorSubject<string | null>(null);
  public token: Observable<string | null> = this.tokenSubject.asObservable();
  // 新增：直接返回登录状态的Observable
  public isLoggedIn$: Observable<boolean> = this.token.pipe(
    map(token => !!token) // 将token转为布尔值，true表示已登录
  );

  // ... 其他代码保持不变
}

对应组件中修改：

export class NavigationComponent {
  userService = inject(UserService);
  isLoggedIn$ = this.userService.isLoggedIn$; // 直接使用封装好的状态

  logout() {
    this.userService.logout();
  }
}

模板里的判断也可以更直观：

@if(!(isLoggedIn$ | async)){
  <li routerLink="/signup" routerLinkActive="active">
    <a>Sign Up</a>
  </li>
  <li routerLink="/login"><a>Login</a></li>
} @else {
  <li routerLink="/create-match"><a>Create Match</a></li>
  <li (click)="logout()"><a>Logout</a></li>
}

验证效果 #

修改后登录成功时，tokenSubject会立即推送新token，组件订阅的isLoggedIn$会收到新值，UI会自动切换为注销按钮；注销时已正确调用tokenSubject.next(null)，UI也会实时切回登录按钮，无需刷新页面。

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