如何为OpenAPI生成的TypeScript-Angular客户端配置访问令牌

一、编写AuthService认证服务 #

这个服务负责令牌的获取、存储和读取，需要适配后端的登录接口和令牌返回格式：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private readonly tokenStorageKey = 'auth_access_token';
  // 替换为你的后端登录接口地址
  private loginApiUrl = 'http://your-springboot-backend/api/auth/login';

  constructor(private http: HttpClient) {}

  // 登录接口：向后端请求令牌并存储
  login(username: string, password: string): Observable<any> {
    return this.http.post(this.loginApiUrl, { username, password }).pipe(
      tap((response: any) => {
        // 注意：这里的字段名要和后端返回的令牌字段一致，比如后端返回access_token就用这个
        if (response.access_token) {
          localStorage.setItem(this.tokenStorageKey, response.access_token);
        }
      })
    );
  }

  // 供OpenAPI配置调用的令牌获取方法
  getAccessToken(): string | null {
    return localStorage.getItem(this.tokenStorageKey);
  }

  // 登出清除令牌
  logout(): void {
    localStorage.removeItem(this.tokenStorageKey);
  }

  // 检查是否已持有有效令牌
  isAuthenticated(): boolean {
    return !!this.getAccessToken();
  }
}

二、正确配置AppModule #

确保OpenAPI的Configuration依赖注入正确，同时不要遗漏必要的模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
// 替换为你OpenAPI生成代码的实际路径
import { ApiModule, Configuration } from './generated-api';
import { AuthService } from './auth.service';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule, // 必须导入：AuthService和ApiModule都依赖HttpClient
    ApiModule
  ],
  declarations: [AppComponent],
  providers: [
    {
      provide: Configuration,
      useFactory: (authService: AuthService) => new Configuration({
        // 绑定AuthService的getAccessToken方法，确保上下文正确
        accessToken: authService.getAccessToken.bind(authService)
      }),
      deps: [AuthService],
      multi: false
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

三、排查白屏问题的关键点 #

你自行编写服务后出现白屏无报错，大概率是以下原因：

• 未导入HttpClientModule：AuthService和OpenAPI的ApiModule都需要HttpClient，未导入会导致静默初始化失败，直接白屏。
• 令牌获取方法异常：比如getAccessToken返回undefined或抛出错误，导致OpenAPI的请求拦截器崩溃。可以在方法内加console.log(this.getAccessToken())调试返回值。
• OpenAPI代码路径错误：导入ApiModule或Configuration时路径写错，导致模块未正确加载。
• 循环依赖：如果AuthService和ApiModule存在循环依赖，会导致初始化失败。确保AuthService使用providedIn: 'root'方式注入。

四、验证认证是否生效 #

1. 在登录组件中调用AuthService.login()获取令牌：

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  template: `<button (click)="testLogin()">测试登录</button>`
})
export class LoginComponent {
  constructor(private authService: AuthService) {}

  testLogin(): void {
    this.authService.login('your-username', 'your-password').subscribe({
      next: () => console.log('令牌已存储'),
      error: err => console.error('登录失败', err)
    });
  }
}

2. 登录成功后调用任意OpenAPI生成的接口，在浏览器开发者工具的网络面板中检查请求头是否携带Authorization: Bearer {你的令牌}。

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