Angular 4中使用HTTP GET方法时JWT Token丢失问题排查

我一眼就看出问题所在了——HttpHeaders在Angular里是不可变对象，你当前的写法并没有真正把Authorization头添加到请求里，这就是Token丢失的核心原因。

问题根源分析 #

你创建httpHeaders后调用了httpHeaders.set('Authorization for JWT', 'Token')，但这个方法并不会修改原有的httpHeaders实例，而是返回一个全新的HttpHeaders对象。因为你没有把这个新对象重新赋值给httpHeaders，所以最终传给请求的还是只有Content-Type的原始头，Authorization头根本没被包含进去。

另外还有个小细节：标准的JWT认证头键名应该是Authorization，格式一般为Bearer <你的Token>，而非你写的Authorization for JWT，后端大概率是按照标准头来识别Token的，这个也需要修正。

修正后的代码方案 #

这里给你三种可行的修正方式，选你觉得顺手的就行：

方案1：重新赋值HttpHeaders实例

getPosts() { 
  let httpHeaders = new HttpHeaders().set('Content-Type', 'application/json'); 
  // 关键：把set返回的新实例重新赋值给httpHeaders
  httpHeaders = httpHeaders.set('Authorization', 'Bearer ' + '你的Token内容'); 
  return this.http.get(`http://localhost:9090/api/user?user_id=${this.user.id.toString()}`, {
    headers: httpHeaders, 
    responseType: 'json'
  }); 
}

方案2：链式调用更简洁

利用set方法返回新实例的特性，直接链式调用一次性构建所有头：

getPosts() { 
  const httpHeaders = new HttpHeaders()
    .set('Content-Type', 'application/json')
    .set('Authorization', 'Bearer ' + '你的Token内容'); 
  return this.http.get(`http://localhost:9090/api/user?user_id=${this.user.id.toString()}`, {
    headers: httpHeaders, 
    responseType: 'json'
  }); 
}

方案3：初始化时直接传入头对象

最直观的写法，创建HttpHeaders时直接传入包含所有头的对象：

getPosts() { 
  const httpHeaders = new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + '你的Token内容'
  });
  return this.http.get(`http://localhost:9090/api/user?user_id=${this.user.id.toString()}`, {
    headers: httpHeaders, 
    responseType: 'json'
  }); 
}

进阶优化：用HTTP拦截器统一管理认证头 #

如果你的应用里很多请求都需要带JWT Token，手动在每个服务里加头会很繁琐，推荐用Angular的HTTP拦截器来统一处理：

1. 创建一个认证拦截器：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 从本地存储或服务中获取你的Token
    const authToken = localStorage.getItem('authToken');
    // 克隆请求并添加Authorization头（避免修改原始请求对象）
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer ' + authToken)
    });
    // 继续传递修改后的请求
    return next.handle(authReq);
  }
}

2. 在AppModule中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 允许多个拦截器并存
    }
  ]
})
export class AppModule {}

这样所有通过HttpClient发起的请求都会自动带上Authorization头，不用再手动在每个服务里重复写头的逻辑了。

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