Angular 5中使用HttpClient请求前为Header添加Token的方法

没问题，我来帮你解决在请求Header里添加Token的问题！根据你的代码场景，我给你几个实用的解决方案，你可以根据自己的项目情况选择：

1. 从本地存储直接获取Token（简单快速场景） #

如果你的Token是登录后存在localStorage或sessionStorage里的，直接取出来用就行，注意很多API要求Token前加Bearer前缀（如果你的API不需要，直接传token字符串即可）：

create(title, text) {
  // 从localStorage获取token，假设存储的key是'auth_token'
  const token = localStorage.getItem('auth_token');
  
  let headers: HttpHeaders = new HttpHeaders();
  headers = headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  
  // 有token才添加Authorization头
  if (token) {
    headers = headers.append('Authorization', `Bearer ${token}`);
  }

  // 别忘了构造请求体（你的API是form-urlencoded格式，所以用URLSearchParams处理）
  const body = new URLSearchParams();
  body.set('title', title);
  body.set('text', text);
  
  return this.http.post('http://myapi/api.php/...', body.toString(), { headers });
}

2. 通过Auth服务管理Token（更规范的方式） #

如果你的项目有专门的权限管理服务，建议把Token的存取逻辑封装在Auth服务里，避免重复代码：
先写一个简单的Auth服务：

// auth.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private currentToken: string | null = null;

  // 登录后调用这个方法存token
  setToken(token: string) {
    this.currentToken = token;
    localStorage.setItem('auth_token', token); // 存本地防止页面刷新丢失
  }

  // 获取token的方法，优先取内存中的，没有再从本地取
  getToken() {
    if (!this.currentToken) {
      this.currentToken = localStorage.getItem('auth_token');
    }
    return this.currentToken;
  }
}

然后在你的业务服务中注入并使用：

// service.ts
import { AuthService } from './auth.service';

// 构造函数注入AuthService
constructor(private http: HttpClient, private authService: AuthService) {}

create(title, text) {
  const token = this.authService.getToken();
  
  let headers: HttpHeaders = new HttpHeaders();
  headers = headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  
  if (token) {
    headers = headers.append('Authorization', `Bearer ${token}`);
  }

  const body = new URLSearchParams();
  body.set('title', title);
  body.set('text', text);
  
  return this.http.post('http://myapi/api.php/...', body.toString(), { headers });
}

3. 使用HTTP拦截器（最佳实践，全局统一处理） #

如果你的项目大部分API都需要加Token，推荐用拦截器统一处理，不用每个请求都手动写Header：
先创建一个Auth拦截器：

// auth.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const token = this.authService.getToken();
    
    // 有token就克隆请求并添加Authorization头
    if (token) {
      const authRequest = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
      return next.handle(authRequest);
    }
    
    // 没有token就直接放行原请求
    return next.handle(request);
  }
}

然后在app.module.ts里注册这个拦截器：

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

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

这样你的业务请求就不用再手动加Authorization头了，代码会更简洁：

// service.ts
create(title, text) {
  let headers: HttpHeaders = new HttpHeaders();
  headers = headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

  const body = new URLSearchParams();
  body.set('title', title);
  body.set('text', text);
  
  return this.http.post('http://myapi/api.php/...', body.toString(), { headers });
}

几个注意点 #

• 一定要确认你的API要求的Authorization格式：是Bearer {token}还是直接传{token}，别搞错前缀
• 如果Token过期返回401错误，可以在拦截器里统一处理跳转登录页的逻辑
• 如果前端和API不在同一个域名，要确保后端配置了CORS，允许Authorization头跨域访问

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