Angular如何全局配置access_token 无需每个请求方法单独传入

该需求完全可以实现，无需在每个服务端请求方法中单独传参，使用Angular内置的HttpInterceptor（HTTP拦截器）即可完成一次配置、全局生效，所有通过官方HttpClient发起的请求都会自动追加指定token参数。

具体实现步骤 #

• 生成拦截器文件
  可直接通过Angular CLI执行命令生成拦截器骨架：
  ng generate interceptor auth-token
  也可以手动在项目公共服务目录下创建拦截器文件。

• 编写拦截器逻辑
  打开生成的auth-token.interceptor.ts文件，写入请求拦截和参数追加逻辑：

  import { Injectable } from '@angular/core';
  import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor
  } from '@angular/common/http';
  import { Observable } from 'rxjs';
  // 如果你把token存在全局服务里，在这里引入对应的服务即可
  // import { UserAuthService } from './user-auth.service';
  
  @Injectable()
  export class AuthTokenInterceptor implements HttpInterceptor {
    // 构造函数注入需要的服务，比如用户认证服务
    // constructor(private authService: UserAuthService) {}
  
    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
      // 从存储位置读取token值，可根据自己的存储方案调整：localStorage/sessionStorage/全局服务/状态管理都可以
      const accessToken = localStorage.getItem('access_token_value') ?? '';
  
      // 克隆原请求，追加token参数
      const authReq = request.clone({
        // 如果要求把token作为URL查询参数传递，用setParams配置
        setParams: {
          access_token_value: accessToken
        },
        // 如果实际业务要求把token放在请求头里传递，注释上面的setParams，放开下面的setHeaders配置即可
        // setHeaders: {
        //   Authorization: `Bearer ${accessToken}`
        // }
      });
  
      // 把修改后的请求传递给下一个处理环节
      return next.handle(authReq);
    }
  }
  

• 全局注册拦截器
  写完拦截器逻辑后需要全局注册，才会对所有HTTP请求生效，根据自己项目使用的模式选择对应注册方式：

  • NgModule模式（Angular 14及更早版本常用）
    打开根模块文件app.module.ts，在providers数组中添加拦截器配置：

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
    import { AppComponent } from './app.component';
    import { AuthTokenInterceptor } from './auth-token.interceptor';
    
    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule, HttpClientModule],
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: AuthTokenInterceptor,
          multi: true // *该配置必须添加，支持多个拦截器共存*
        }
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

  • Standalone模式（Angular 15+默认模式）
    打开应用配置文件app.config.ts，在providers数组中添加配置：

    import { ApplicationConfig } from '@angular/core';
    import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
    import { HTTP_INTERCEPTORS } from '@angular/common/http';
    import { AuthTokenInterceptor } from './auth-token.interceptor';
    
    export const appConfig: ApplicationConfig = {
      providers: [
        provideHttpClient(withInterceptorsFromDi()),
        {
          provide: HTTP_INTERCEPTORS,
          useClass: AuthTokenInterceptor,
          multi: true // *该配置必须添加，支持多个拦截器共存*
        }
      ]
    };
    

补充说明 #

• 配置完成后，所有通过HttpClient发起的请求都会自动携带access_token_value参数，不需要在每个服务方法里单独添加。
• 如果存在部分公开接口不需要携带token，可以给对应请求添加自定义标记，在拦截器中判断跳过即可，示例逻辑：

  // 拦截器内追加判断
  const isSkipAuth = request.headers.has('X-Skip-Auth');
  if (isSkipAuth) {
    // 直接放行原请求，不追加token
    return next.handle(request);
  }
  

  不需要token的请求发起时，添加对应header即可：

  this.http.get('/public/config', {
    headers: { 'X-Skip-Auth': '1' }
  })
  

• 不推荐通过封装通用HTTP请求方法的方式实现该需求，拦截器是Angular官方提供的全局请求处理方案，兼容Angular生态内的默认HTTP处理逻辑，维护成本最低。

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