Angular 4：如何为特定路由而非全部路由添加请求头

我来帮你搞定这个升级问题！你遇到的核心点在于：Angular 4+的HttpHeaders是不可变对象——和旧版Headers不一样，调用append()或者set()不会修改原对象，而是返回一个全新的HttpHeaders实例。这就是你在getProfile里卡壳的原因。

正确的代码修改方式 #

你需要针对需要认证的接口，基于基础的请求头配置创建新的专属配置，而不是直接修改原有的httpOptions：

import { HttpClient, HttpHeaders } from '@angular/common/http';

// 基础请求头：给不需要认证的接口用（比如登录接口）
const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

constructor(private http: HttpClient) { }

authenticateUser(user) {
  return this.http.post('http://localhost:3000/users/authenticate', user, httpOptions);
}

getProfile() {
  this.loadToken();
  // 基于基础headers创建新实例，添加Authorization认证头
  const authHttpOptions = {
    headers: httpOptions.headers.append('Authorization', this.authToken)
  };
  return this.http.get('http://localhost:3000/users/profile', authHttpOptions);
}

额外的小建议 #

• 如果你的authToken可能为空（比如用户未登录时），建议加个判断避免无效的请求头：

  getProfile() {
    this.loadToken();
    let authHeaders = httpOptions.headers;
    // 仅当token存在时添加认证头
    if (this.authToken) {
      authHeaders = authHeaders.append('Authorization', this.authToken);
    }
    const authHttpOptions = { headers: authHeaders };
    return this.http.get('http://localhost:3000/users/profile', authHttpOptions);
  }
  

• 要是你需要一次性设置多个头，也可以直接创建全新的HttpHeaders实例，写法更直观：

  const authHttpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': this.authToken
    })
  };
  

这样就能精准地给getProfile这类需要认证的接口单独添加请求头，其他接口依然使用基础配置，完全符合你的需求~

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