Ionic 3如何在请求头携带JWT_Token调用Laravel接口？

看起来你遇到的问题很典型——Postman能正常带Token请求，但自己的Angular/Ionic代码就是不行。我来帮你一步步排查和解决：

首先明确核心要求 #

Laravel的auth:api中间件默认会检查请求头里的Authorization: Bearer {your-jwt-token}，所以你的代码必须正确生成这个请求头，并且确保Token能被正确获取和携带。

情况1：使用Angular的HttpClient（推荐） #

这是Angular官方推荐的HTTP客户端，你已经注入了它，我们来修正请求代码：

1. 确保异步获取Token的顺序正确
   因为Storage.get()是异步操作，你得等Token取出来再发起请求，不能同步直接用。

// 示例API服务方法
getFromApi(endpoint: string) {
  return this.storage.get('token').then(token => {
    if (!token) {
      // 处理Token不存在的情况，比如跳转到登录页
      throw new Error('No token found');
    }
    // 构造正确的请求头
    const headers = {
      'Authorization': `Bearer ${token}`
    };
    // 发起GET请求
    return this.http.get(`your-api-base-url/${endpoint}`, { headers }).toPromise();
  });
}

或者用更符合Angular风格的RxJS写法：

import { from } from 'rxjs';
import { switchMap } from 'rxjs/operators';

getFromApi(endpoint: string) {
  return from(this.storage.get('token')).pipe(
    switchMap(token => {
      if (!token) {
        throw new Error('No token available');
      }
      const headers = {
        'Authorization': `Bearer ${token}`
      };
      return this.http.get(`your-api-base-url/${endpoint}`, { headers });
    })
  );
}

2. 排查常见错误

• 检查token的键名是否和存储时一致（比如你存的是jwt_token但取的是token）
• 用浏览器开发者工具的Network标签，查看实际发送的请求头里有没有Authorization字段，格式是不是Bearer xxxxx
• 确认Token没有过期（Laravel的JWT默认有效期是60分钟，过期的话要刷新）

情况2：使用Ionic Native的HTTP模块 #

如果你用的是@ionic-native/http，它的请求头设置方式和Angular的HttpClient不一样，需要这样写：

getFromApi(endpoint: string) {
  return this.storage.get('token').then(token => {
    if (!token) {
      throw new Error('Token missing');
    }
    // 设置请求头（可全局设置或单个请求设置）
    this.httpnative.setHeader('*', 'Authorization', `Bearer ${token}`);
    // 发起GET请求
    return this.httpnative.get(`your-api-base-url/${endpoint}`, {}, {});
  });
}

注意：Ionic Native的HTTP用的是原生网络请求，和浏览器XHR不同，调试时需要用设备日志或Ionic DevApp的调试工具查看请求头。

额外排查点 #

• CORS配置：虽然Postman正常，但如果前端和后端域名不同，要确保Laravel已配置正确的CORS（比如用barryvdh/laravel-cors包），允许Authorization头被携带
• 旧Http模块：你导入的@angular/http的Http是已弃用的旧模块，建议完全切换到HttpClient，避免混用导致问题
• Token格式：确保存储的Token完整，没有被截断或添加多余字符（比如引号）

快速测试方法 #

在发起请求前先打印Token和请求头，确认内容正确：

this.storage.get('token').then(token => {
  console.log('Stored Token:', token);
  console.log('Authorization Header:', `Bearer ${token}`);
});

这样就能快速定位是Token获取的问题，还是请求头设置的问题。

内容的提问来源于stack exchange，提问作者Paulo José Oliveira Rosa