angular-oauth2-oidc未向资源服务器发送access_token问题求助

我用angular-oauth2-oidc实现PKCE流程，但调用资源服务器API时请求头里没带access_token，甚至检查也没法确认是否获取到了token。按照预期这个库应该自动给http://localhost:8080的请求带上access_token，相关配置和代码如下：

AppModule配置 #

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    OAuthModule.forRoot({
      resourceServer: {
          allowedUrls: ['http://localhost:8080'],
          sendAccessToken: true
      }
  })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

LoginComponent代码（使用initCodeFlow()） #

export class LoginComponent {
  title = 'for-south-ui';

  constructor(private oauthService: OAuthService, private loginService: LoginService, private oAuthStorage: OAuthStorage) {
    this.configure();
  }

authConfig: AuthConfig = {
    issuer: 'http://localhost:9090/realms/for-south-app',
    redirectUri: window.location.origin,
    clientId: 'for-south-ui',
    scope: 'openid profile email',
    responseType: 'code',
    showDebugInformation: true,
    requestAccessToken: true,
    dummyClientSecret: 'test'
  }
  
  public login() {
    this.loginService.login();
  }
  
  public logoff() {
    this.loginService.logout();
  }

  public getAccessToken() {
    console.log(this.oAuthStorage.getItem('localStorage'));
  }
  
  private configure() {
    this.oauthService.configure(this.authConfig);
    this.oauthService.tokenValidationHandler = new NullValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
    this.oauthService.setStorage(this.oAuthStorage);
  }
}

资源服务器请求代码 #

export class TopicService {

  private url = "http://localhost:8080/api/v1/topic/test";

  constructor(private httpClient: HttpClient) {}

  public getTest(): Observable<any> {
    return this.httpClient.get<any>(this.url);
  }
}

请求头中未发现access_token，截图显示请求头里没有Authorization字段。

排查与解决步骤 #

1. 正确检查token是否获取

   • 别直接读localStorage键，用库提供的this.oauthService.getAccessToken()方法打印返回值，确认是否拿到有效token；也可以在浏览器开发者工具的Application标签里，查看localStorage中的access_token字段，确认token存在且未过期。

2. 调整OAuthService配置顺序

   • 当前代码里setStorage在loadDiscoveryDocumentAndTryLogin之后调用，会导致登录用默认存储、后续读token用自定义存储，出现不匹配。把setStorage移到configure之后、loadDiscoveryDocumentAndTryLogin之前：

     private configure() {
       this.oauthService.configure(this.authConfig);
       this.oauthService.setStorage(this.oAuthStorage); // 调整位置
       this.oauthService.tokenValidationHandler = new NullValidationHandler();
       this.oauthService.loadDiscoveryDocumentAndTryLogin();
     }
     

3. 确认resourceServer的URL匹配规则

   • allowedUrls是前缀匹配，确保API地址http://localhost:8080/api/v1/topic/test确实以配置的http://localhost:8080开头，没有端口或路径拼写错误；可以临时把allowedUrls设为['*']，测试是否是URL匹配的问题。

4. 检查登录流程是否正确触发

   • 确认LoginService.login()内部是否调用了this.oauthService.initCodeFlow()，如果没调用这个方法，PKCE流程不会启动，自然拿不到token。

5. 验证token有效性

   • 使用NullValidationHandler会跳过token验证，若token本身无效（格式、签名问题），库可能不会自动附加到请求头。可以临时换成JwksValidationHandler验证token有效性：

     import { JwksValidationHandler } from 'angular-oauth2-oidc';
     // ...
     this.oauthService.tokenValidationHandler = new JwksValidationHandler();
     

6. 确认HttpClient模块配置

   • 确保TopicService注入的HttpClient来自@angular/common/http，且HttpClientModule已在AppModule中正确导入，没有重复导入或路径错误。

内容的提问来源于stack exchange，提问作者Đình Hải Nguyễn