如何在Angular的HttpClient.get请求中设置Authorization请求头

嘿，我来帮你把这段代码补全，让你的HttpClient请求能正确带上Authorization头。结合你给的代码片段，咱们一步步调整：

首先，Angular的HttpClient推荐使用HttpHeaders类来构造请求头（虽然普通对象也能被识别，但HttpHeaders提供了更规范的不可变操作，适合后续扩展）。咱们先把缺失的导入补上，然后完善请求头的创建和请求调用：

步骤1：导入HttpHeaders #

首先在你的导入语句里加上HttpHeaders：

import {Component, OnInit} from '@angular/core';
import {HttpClient, HttpErrorResponse, HttpResponse, HttpHeaders} from '@angular/common/http';

步骤2：完善请求头与发起请求 #

接下来修改ngOnInit方法，创建合规的请求头并发起GET请求：

ngOnInit(): void {
  // 方式1：直接用HttpHeaders构造函数初始化
  const headers = new HttpHeaders({
    'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzYXNobyIsImF1dGgiOiJST0xFX1VTRVIiLCJleHAiOjE1MjQwODcyMzJ9.MUv5RgI9LxQyrrCfjfX8HR2-XiQmz4vjLqH7V_0Du7VFLC0WrK_y3FfeNoT2Nj_...'
  });

  // 方式2：如果后续需要动态添加头，可以用set方法（HttpHeaders是不可变的，每次set返回新实例）
  // let headers = new HttpHeaders();
  // headers = headers.set('Authorization', 'Bearer 你的token');

  // 发起GET请求，把headers传入options参数
  this.http.get('https://你的目标API地址', { headers })
    .subscribe({
      next: (response) => {
        console.log('请求成功:', response);
        // 这里处理返回的数据
      },
      error: (error: HttpErrorResponse) => {
        console.error('请求失败:', error);
        // 这里处理错误
      }
    });
}

关键注意点 #

• 注意Authorization头的格式：Bearer 后面要跟你的JWT token，别漏了空格！
• 记得把代码里的https://你的目标API地址替换成实际要请求的接口URL
• 如果你的token是从服务或本地存储获取的（比如localStorage），可以动态替换掉硬编码的token，比如：

  const token = localStorage.getItem('authToken');
  const headers = new HttpHeaders({
    'Authorization': `Bearer ${token}`
  });
  

这样调整后，你的GET请求就能正确带上Authorization头啦！

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