在 Ionic 4 / Angular 应用程序中使用 Observables 的正确方法答案

【问题标题】：Proper way to use Observables in Ionic 4 / Angular application在 Ionic 4 / Angular 应用程序中使用 Observables 的正确方法
【发布时间】：2020-05-11 11:02:27
【问题描述】：

所以有一个使用 Ionic/Angular 创建的简单应用程序。

app.component.html（菜单）包含用户电话：

<span *ngIf="phone">{{phone}}</span>

还有app.component.ts：

public phone: string = ''

initializeApp() {
    this.platform.ready().then(() => {
        this.getUser()
    });
}

getUser() {
    if(this.auth.isLoggedIn) {
        this.auth.getUser()
            .subscribe(
                user => {
                    this.phone = user.phone
                }
            )
    }
}

AuthService：

public isLoggedIn: boolean = false
public token: string = null


getUser(): Observable<User> {
        const headers = new HttpHeaders({
            'Content-Type': 'application/json',
            'Token': this.token
        })

        return this.http
            .get<User>(this.util.API_URL + '/user', { headers } )
            .pipe(
                map(
                    res => {
                        // api returns json response with 'result' object
                        return res['result']
                    }
                )
            )
    }

问题应用启动时，我需要从 app.component.ts 调用 getUser() 方法。如果用户已登录，它现在可以工作。但是当用户未登录时，我需要在用户登录成功后调用 getUser() 方法。但是，例如，我不能在 LoginComponent 的 initializeApp() 之前调用 AppComponent。

那么，在 AppComponent 中显示用户数据的正确方法是什么？

【问题讨论】：

成功登录后为什么不在LoginComponent 中将其设置为服务值并在AppComponent 上获取它？为什么要对服务器进行冗余调用以获取用户详细信息

标签： angular ionic-framework observable

【解决方案1】：

auth.service：

export class AuthService {
  private currentTokenSubject = new BehaviorSubject<string>(null); // <-- assign default value here

  constructor(
    private http: HttpClient,
    private storage: Storage,
  ) {
    this.getToken().then(
      res => {
        this.currentTokenSubject.next(res);               // <-- push token to the observable
      }
    );
  }

  async getToken() {
    return await this.storage.get('accessToken');
  }

  public get currentTokenValue(): Observable < string > {
    return this.currentTokenSubject.asObservable();        // <-- return observable here
  }

  login(username: string, password: string) {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization': 'Basic ' + btoa(username + ':' + unescape(encodeURIComponent(password)))
    })

    return this.http.post<Token>(`${environment.apiUrl}/auth/signin`, {}, { headers }).pipe(
      map((res: Token) => {
        let token = res.token;
        // store user details and jwt token in local storage to keep user logged in between page refreshes
        this.storage.set('accessToken', token);
        this.currentTokenSubject.next(token);              // <-- also push new token here?
        return token;
      }));
  }

  logout() {
    // remove user from local storage to log user out
    this.storage.remove('accessToken');
    this.currentTokenSubject.next(null);
  }
}

【讨论】：