Angular-Keycloak 默认情况下不会将不记名令牌添加到我的 http 请求中

Question

我正在尝试实现 keycloak-Angular，但我无法默认将不记名令牌添加到我的 http 请求中。

“keycloak-角度”：“9.1.0” “keycloak-js”：“16.0.0” “角度”：“13.0.2”

    function initializeKeycloak(keycloak: KeycloakService) {
  return async () =>
   await keycloak.init({
      config: {
        url: 'https://127.0.0.1:8443/auth',
        realm: '*****',
        clientId: '****',
      },
      initOptions: {
        onLoad: 'login-required',
        checkLoginIframe: false,
      },
      loadUserProfileAtStartUp: true,
      enableBearerInterceptor: true,
      bearerExcludedUrls: [],
      bearerPrefix:'Bearer '
    });
}



 @NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CoreModule,
    BrowserModule,
    KeycloakAngularModule,
    AppRoutingModule
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'it' },
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak, 
      multi: true,
      deps: [KeycloakService]
    },
  ],
  bootstrap: [AppComponent]
})

Answer 1

您必须使用 HttpInterceptor 在每个 api 调用时添加自定义标头。 创建您的拦截器，并将其添加到 AppModule

providers: [
 {
   provide: HTTP_INTERCEPTORS,
   useClass: ApiInterceptor,
   multi: true,
 }
],

实现拦截功能：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  request = request.clone({
    setHeaders: {
      Authorization: `Bearer #YOUR_TOKEN_HERE#`
    }
  });

  return next.handle(request);
}

Answer 2

在我的例子中，没有使用 HttpClient 来执行请求。

而是直接使用了fetch并且没有被Angular拦截。

因此，如果您已安装 HttpInterceptor 但它不起作用，请确保使用 HttpClient 来执行请求。

我将

fetch(...)

 更改为 

http.get(...)

 并且成功了

Answer 3

我来晚了一点。 keycloak-Angular Github 存储库上有文档。以下是如何包含 BearerTokenInterceptor 的示例，它将 Bearer Access Token 添加到您的 api 的 http 请求中：

https://github.com/mauriciovigolo/keycloak-angular/blob/main/docs/interceptors.md