Angular 4中如何从Observable Response获取响应Token？

你的当前代码里res方法只是直接返回响应流，没有添加提取Token的逻辑，而且操作符的链式调用也可以优化下，我帮你一步步调整：

第一步：导入必要的RxJS操作符 #

首先确保你导入了map和catch操作符（Angular 4需要手动导入这些RxJS操作符）：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

第二步：修改res方法，添加Token提取逻辑 #

把res方法改成处理Observable流，从响应中提取Token并保存（示例存到localStorage，你也可以根据需求存到专门的认证服务里）：

private res(observable: Observable<Response>): Observable<Response> {
  return observable
    .map(response => {
      // 根据后端返回的Token位置调整提取逻辑：
      // 情况1：Token在响应头（比如Authorization字段，通常带Bearer前缀）
      const tokenFromHeader = response.headers.get('Authorization')?.replace('Bearer ', '');
      // 情况2：Token在响应体的JSON数据中（比如返回{ token: "xxx" }）
      const tokenFromBody = response.json().token;

      // 取实际存在的Token，可根据后端返回情况二选一
      const token = tokenFromHeader || tokenFromBody;

      if (token) {
        // 保存Token到本地存储
        localStorage.setItem('authToken', token);
      }

      // 务必返回原响应，不影响后续业务代码使用响应数据
      return response;
    })
    .catch(this.handleError);
}

第三步：调整get方法的链式调用 #

把原来的catch从super.get后移到res方法里，让流处理逻辑更清晰：

get(url: string, options?: RequestOptionsArgs): Observable<Response> {
  return this.res(super.get(appConfig.apiUrl + url, this.addJwt(options)));
}

补充：确保handleError方法正确返回错误流 #

你的handleError需要返回一个错误Observable，这样才能被订阅者正确捕获处理：

private handleError(error: Response | any) {
  console.error('请求出错:', error);
  // 返回错误流，让订阅者可以自定义错误处理逻辑
  return Observable.throw(error.message || '服务器请求错误');
}

这样修改后，每次调用get方法时，响应流会先自动提取并保存Token，再把原响应返回给业务代码，既不影响业务逻辑使用响应数据，又能完成Token的获取和存储。

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