Angular：如何在服务端响应前阻止程序访问未赋值的isAuthorized属性

你遇到的核心问题是异步初始化的状态被同步暴露，外部无法感知加载进度才会拿到未初始化的null值，可根据你的业务场景选择以下方案：

方案1：暴露异步可等待对象（通用适配所有场景） #

不直接同步返回布尔值，将权限状态封装为Promise，外部调用时必须等待请求完成才能拿到结果，从根源上避免访问到未初始化值。
代码示例：

private _isAuthorizedPromise: Promise<boolean>;
public userName: string = '';
public data: User | null = null;

constructor(private http: HttpClient) {
  // 初始化阶段直接创建权限Promise
  this._isAuthorizedPromise = this.update();
}

// 外部访问该属性即可拿到可等待的权限状态
get isAuthorized(): Promise<boolean> {
  return this._isAuthorizedPromise;
}

async update(): Promise<boolean> {
  try {
    this.data = await this.getUserInfo();
    console.log(this.data.userName);
    this.userName = this.data.userName;
    return true;
  } catch (err) {
    // 错误场景按需处理，这里示例返回无权限
    return false;
  }
}

getUserInfo(){
  return this.http.get<User>(this.url, { headers: header }).toPromise();
}

外部使用时直接await authService.isAuthorized，或者在Angular模板中配合async管道使用，会自动等待加载完成后执行后续逻辑。

方案2：使用Angular APP_INITIALIZER启动前预加载（最适合全局权限校验场景） #

权限校验通常是应用启动前置逻辑，可以通过Angular官方提供的APP_INITIALIZER令牌，在应用根模块初始化阶段完成权限请求，等请求返回后应用才会正式渲染，不会出现权限状态未初始化的情况。
首先在根模块注册初始化逻辑：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AuthService } from './auth.service';
import { AppComponent } from './app.component';

// 初始化工厂函数，应用启动前自动执行
function initAuth(authService: AuthService) {
  return () => authService.update();
}

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initAuth,
      deps: [AuthService],
      multi: true
    }
  ]
})
export class AppModule { }

调整后的AuthService代码：

private _isAuthorized: boolean = false;
public get isAuthorized(): boolean {
  return this._isAuthorized;
}
public userName: string = '';
public data: User | null = null;

constructor(private http: HttpClient) {}

async update() {
  try {
    this.data = await this.getUserInfo();
    console.log(this.data.userName);
    this.userName = this.data.userName;
    this._isAuthorized = true;
  } catch (err) {
    this._isAuthorized = false;
    // 错误场景可跳转登录页等自定义处理
  }
}

getUserInfo(){
  return this.http.get<User>(this.url, { headers: header }).toPromise();
}

方案3：添加加载状态守卫（适合需要保留同步访问的场景） #

如果一定要保留同步的属性访问方式，可以额外添加加载状态标记，访问权限属性时如果还在加载就抛出明确错误，避免外部拿到null执行错误逻辑。
代码示例：

private _isAuthorized: boolean | null = null;
private _isLoading: boolean = true;
public userName: string = '';
public data: User | null = null;

public get isAuthorized(): boolean {
  if (this._isLoading) {
    throw new Error('权限状态加载中，请等待加载完成后再访问');
  }
  return this._isAuthorized!;
}

// 暴露加载状态供外部判断
public get isAuthLoading(): boolean {
  return this._isLoading;
}

constructor(private http: HttpClient) {
  this.update();
}

async update() {
  this._isLoading = true;
  try {
    this.data = await this.getUserInfo();
    console.log(this.data.userName);
    this.userName = this.data.userName;
    this._isAuthorized = true;
  } catch (err) {
    this._isAuthorized = false;
  } finally {
    this._isLoading = false;
  }
}

getUserInfo(){
  return this.http.get<User>(this.url, { headers: header }).toPromise();
}

外部访问前可先判断!authService.isAuthLoading再使用权限属性，或者捕获错误处理加载态。

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