在Angular中,可以使用HttpClient拦截器来为图像发送Bearer身份验证。下面是一个示例代码:
auth.interceptor.ts
的文件,并在其中添加以下代码:import { Injectable } from '@angular/core';
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(
req: HttpRequest,
next: HttpHandler
): Observable> {
const token = // 获取用于身份验证的令牌,例如从Keycloak中获取
const authReq = req.clone({
setHeaders: {
Authorization: `Bearer ${token}`,
},
});
return next.handle(authReq);
}
}
app.module.ts
文件中,将AuthInterceptor
添加到providers
数组中:import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';
@NgModule({
imports: [HttpClientModule],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true,
},
],
})
export class AppModule {}
这样,每当发送HTTP请求时,拦截器都会将Bearer令牌附加到请求的标头中。对于图像请求,也会自动添加身份验证标头。
请确保在AuthInterceptor
中获取正确的令牌,并在应用程序中正确设置Keycloak。