Ionic3中使用ionic-starter-super携带JWT请求数据遇问题

我来帮你排查下问题所在～你的代码里有几个关键疏漏导致JWT令牌没被正确附加到POST请求中：

• 你创建了Headers并添加了Authorization头，但调用this.http.head({headers:headers})完全是多余的操作，这个方法只是发送一个HEAD请求，并没有把headers关联到你后续要发的POST请求上。
• 最终调用POST请求时，你直接传入了原始的reqOpts，根本没把你创建的包含令牌的headers整合进去，所以请求自然带不上令牌。

修正后的代码 #

post(endpoint: string, body: any, reqOpts?: any) {
  // 从localStorage获取JWT令牌
  const token = localStorage.getItem('token');
  
  // 处理请求配置：兼容用户传入的自定义配置，没有则新建空对象
  const requestOptions = reqOpts || {};
  
  // 初始化headers：如果用户已有headers配置就复用，否则新建Headers实例
  requestOptions.headers = requestOptions.headers || new Headers();
  
  // 只有令牌存在时，才添加Authorization头
  if (token) {
    requestOptions.headers.append('Authorization', `Bearer ${token}`);
  }

  // 发送POST请求，带上处理好的配置
  return this.http.post(`${this.url}/${endpoint}`, body, requestOptions);
}

针对新版本Ionic的补充说明 #

如果你的项目使用的是Angular HttpClient（Ionic 3+ 普遍使用），Headers已经被HttpHeaders替代，而且HttpHeaders是不可变对象，append后需要重新赋值，代码要调整成这样：

// 先导入HttpHeaders
import { HttpHeaders } from '@angular/common/http';

post(endpoint: string, body: any, reqOpts?: any) {
  const token = localStorage.getItem('token');
  const requestOptions = reqOpts || {};
  
  // 初始化HttpHeaders
  requestOptions.headers = requestOptions.headers || new HttpHeaders();
  
  if (token) {
    // 注意：HttpHeaders不可变，append后要重新赋值给requestOptions.headers
    requestOptions.headers = requestOptions.headers.append('Authorization', `Bearer ${token}`);
  }

  return this.http.post(`${this.url}/${endpoint}`, body, requestOptions);
}

关键修正点说明 #

1. 移除了无意义的http.head调用，直接聚焦在POST请求的配置上
2. 兼容用户传入的自定义reqOpts，不会覆盖用户自己设置的其他请求头或参数
3. 增加了令牌非空判断，避免令牌为null时生成无效的Bearer null头

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