Angular：如何从 API 调用响应中提取一个属性？ [复制]

Question

我有一个 Django Rest Framework 后端和一个 Angular 前端。
我使用 JWT 进行身份验证。当我尝试获取令牌时，我得到以下 JSON 格式的结果：

{
    "refresh": "jfksdajfkjsdkafjasdjfkjsdkfjksdfjfj8j2qfj2jjf",
    "access": "asjdfijajf8wjfw8ijf89wfj08jfw890ijf8wsf098wsfjaw"
}

我的代码如下所示：
Auth Service

private token: Observable<string>;

private params = {
    params: new HttpParams()
      .set('username', 'MYUSERNAME')
      .set('password', 'MYPASSWORD')
      .set('content-type', 'application/json')
  };

constructor(private http: HttpClient) { }

getToken(): Observable<any>{
    this.token = this.http.post('https://www.mywebsite.com/api-token', this.params);
    return this.token;
  }

应用程序

private url = 'https://www.mywebsite.com/api/movies';

private data = {
    headers: new HttpHeaders({
      'Authorization': `Bearer ${this.authService.getToken()}`,
      'content-type': 'application/json'
    })
  };

constructor(private http: HttpClient, private authService: AuthServiceService) { }

fetchMovies(): Observable<Movie[]> {
  console.log(this.data);
  return this.http.get<Movie[]>(this.url, this.data);
}

当我尝试运行此代码时，我得到一个“bad_authorization_header”
详细信息：“授权标头必须包含两个以空格分隔的值”

我认为发生错误是因为我将刷新和访问令牌一起传递。
如何仅提取访问令牌？

感谢您的帮助！

Answer 1

将 getToken 更改为：-

getToken(): Observable<any>{
    return this.http.post('https://www.mywebsite.com/api-token', this.params).pipe(map((res)=>res.access));
  }

更改数据，例如：-

this.authService.getToken().subscribe((token)=>{
   this.data = = {
    headers: new HttpHeaders({
      'Authorization': `Bearer ${token}`,
      'content-type': 'application/json'
    })
});