如何将Auth Service的Token导入environment.ts并配置请求头？

首先要明确：environment.ts是Angular的静态配置文件，程序启动时就会加载，这里无法直接注入AuthService或执行异步操作获取token，所以不能直接在这个文件里填充token。以下是几种可行的实现方式：

方案一：使用HTTP拦截器（推荐） #

通过Angular的HTTP拦截器，自动为所有请求添加token请求头，无需手动处理headers，同时完美适配异步获取token的逻辑。

1. 创建Auth拦截器 #

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 将Promise转为Observable，适配RxJS流
    return from(this.authService.getAccessToken()).pipe(
      switchMap(token => {
        let modifiedRequest = request;
        if (token) {
          // 克隆请求并添加token头（避免修改原请求对象）
          modifiedRequest = request.clone({
            setHeaders: {
              'x-authorization-token': token
            }
          });
        }
        return next.handle(modifiedRequest);
      })
    );
  }
}

2. 在模块中注册拦截器 #

在app.module.ts的providers数组中添加拦截器配置：

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

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

方案二：动态生成带token的Headers #

将基础header配置转为函数，在需要发起请求的地方，先获取token再生成最终headers。

1. 修改environment.ts #

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

export const environment = { production: false };

// 定义基础Headers生成函数，接受token作为参数
export const getBaseHeaders = (token?: string) => {
  const baseHeaders = new HttpHeaders({
    'access-control-allow-origin': 'https://XXXXX.fred.com/',
    'access-control-allow-methods': 'GET,POST,OPTIONS',
    'access-control-allow-headers': 'Content-Type, X-Authorization-Token, Origin',
    'content-type': 'application/json',
  });
  
  return token ? baseHeaders.set('x-authorization-token', token) : baseHeaders;
};

2. 在请求处使用 #

在组件或服务中，先获取token再生成headers发起请求：

import { getBaseHeaders } from '../../environments/environment';
import { AuthService } from '../services/auth/auth.service';
import { HttpClient } from '@angular/common/http';

// ...组件或服务的其他代码
async fetchData() {
  const token = await this.authService.getAccessToken();
  const headers = getBaseHeaders(token);
  
  this.http.get('/api/your-data', { headers }).subscribe(res => {
    // 处理响应数据
  });
}

方案三：在App初始化时设置Headers（不推荐） #

如果一定要复用原headerAuth对象，可以在App组件初始化时异步获取token并更新headers，但要注意：若有请求在App初始化完成前发起，会导致token未生效。

1. 保持environment.ts结构 #

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

export const environment = { production: false };

export const headerAuth: any = {
  headers: new HttpHeaders({
    'access-control-allow-origin': 'https://XXXXX.fred.com/',
    'access-control-allow-methods': 'GET,POST,OPTIONS',
    'access-control-allow-headers': 'Content-Type, X-Authorization-Token, Origin',
    'content-type': 'application/json',
  })
};

2. 在AppComponent中更新headers #

import { Component, OnInit } from '@angular/core';
import { AuthService } from './services/auth/auth.service';
import { headerAuth } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private authService: AuthService) {}

  async ngOnInit() {
    const token = await this.authService.getAccessToken();
    if (token) {
      headerAuth.headers = headerAuth.headers.set('x-authorization-token', token);
    }
  }
}

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