如何通过 post 方法 api 调用存储字符串以供以后在 Angular 中使用？

Question

我被投入到一个我对 javascript/typescript/angular 几乎没有经验的项目中，所以请原谅我的无知。当用户登录时，我有一个添加用户会话的 post 方法 api 调用，并且在成功发布时它返回 sessionId，它是一个字符串。我需要知道如何检索和存储该字符串以供以后在我的应用程序中使用，该字符串将用作几个不同 api 调用的参数。这是我当前的服务设置：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, retry } from 'rxjs/operators';
import { ConfigService } from './../config/config.service';
import { UserSession } from './user-session.interface';
import { ApiServiceBase } from '../shared/api-service-base'

@Injectable({
  providedIn: 'root'
})

export class UserSessionService extends ApiServiceBase {

  public userSession: UserSession;
  private apiRoute: string = 'user-session';

  constructor(http: HttpClient, configService: ConfigService) {
    super(http, configService);
  }

  public async AddUserSession(userName: string): Promise<string> {
    this.appSettings = (await this.configService.loadConfig().toPromise());
    this.userSession = { userName: userName, application: this.application};
    return this.http.post<string>(this.appSettings.apiSetting.apiAddress + this.apiRoute, this.userSession)
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
      .toPromise()
  }
}

如何检索和存储返回的字符串？

Answer 1

如果即使在浏览器重新加载时也需要保留 sessionId，请尝试将 id 存储在浏览器的 localStorage 中。

localStorage.setItem("sessionId", "123");

您可以在任何地方检索值，只需使用

 localStorage.getItem("sessionId");

但是，如果不是这样，您还可以拥有一项服务，您可以在其中使用 getter 和 setter 来设置和获取应用配置数据

app-data.service.ts

@Injectable({
  providedIn: 'root'
})
export class AppDataStore {
   private _sessionId: string;
   get sessionId() {
       return this._sessionId;
   }

   set sessionId(sId){
        this._sessionId = sId
   }
}

您可以在任何组件/服务中注入 AppDataStore 并使用 setter 设置 sessionId，您还可以使用 getter 方法获取 sessionId。

例如，

any-component.ts/any-services.ts

constructor(private userSessionService : UserSessionService, private appDataService: AppDataStore){}


doSomething(){
   const sessionId = await this.userSessionService.addUserSession();
   this.appDataService.sessionId = sessionId
}

为了在任何其他文件中取回 sessionId，您只需在类的构造函数中注入 AppDataService 并使用

读回 sessionId

this.appDataStore.sessionId;