Angular页面刷新后用户名消失问题排查与解决

问题原因 #

BehaviorSubject是内存级别的状态存储，页面刷新时Angular应用会完全重启，AuthenticationService会重新初始化，此时isLogged和username这两个BehaviorSubject会恢复到初始值（false和空字符串）。当前代码仅在登录接口请求成功时更新状态，刷新后未从本地存储的JWT令牌中重新读取登录状态和用户名，导致头部组件获取到未登录的初始状态，因此用户名不再显示。

修复方案 #

在AuthenticationService的构造函数中添加初始化逻辑：启动时检查本地是否存在有效accessToken，若存在则解析令牌获取用户名，同步更新BehaviorSubject的状态。

修改后的authentication.service.ts #

export class AuthenticationService {
   isLogged = new BehaviorSubject(false);
   username = new BehaviorSubject('');

  currentIsLogged$ = this.isLogged.asObservable();
  currentUsername$ = this.username.asObservable();


  constructor(private http:HttpClient,
              private tokenService:TokenService) { 
    // 初始化时从本地token恢复登录状态
    this.initAuthState();
  }

  // 新增初始化方法
  private initAuthState(): void {
    const accessToken = this.tokenService.getAccessToken();
    if (accessToken) {
      // 校验token有效性（比如检查过期时间）
      const isValid = this.tokenService.isTokenValid(accessToken);
      if (isValid) {
        this.isLogged.next(true);
        this.username.next(this.tokenService.getUsername());
      } else {
        // token无效则清空本地存储
        this.tokenService.clearTokens();
      }
    }
  }

  public authenticate(request:AuthenticationRequest){
    return this.http.post<AuthenticationResponse>(`${AUTH_API}/auth/authenticate`, request)
      .pipe(
        tap(token=>{
          this.tokenService.setAccessToken(token.accessToken);
          this.tokenService.setRefreshToken(token.refreshToken);
          this.isLogged.next(true);
          this.username.next(this.tokenService.getUsername());
        }),
        catchError((err)=>{
          console.log("Error handled by Service..." + err.status)
          return throwError(()=> new Error(err.error.message));
        })
      );
  }
}

补充说明 #

1. 需确保TokenService实现isTokenValid方法，通过解析JWT的exp字段判断令牌是否过期。
2. 若令牌已过期，清空本地存储的令牌，避免无效状态残留。
3. 头部组件的订阅逻辑无需修改，服务初始化时已更新BehaviorSubject状态，组件ngOnInit订阅时会直接获取正确的登录态和用户名。

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