我在 Angular 5 中有一个有效的拦截器。它在 App.module 的提供者中注册，并正确拦截了从应用程序发出的所有请求。
问题是它不会拦截从应用程序使用的库发出的请求。
我正在使用开源库 (NGX-Jsonapi)，并且需要拦截器在库向后端发出的每个请求中提供令牌。
有人遇到同样的问题吗？
编辑：该库使用 HttpClient。
问题：
我有一个拦截器：
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private injector: Injector, private router: Router) {
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const auth = this.injector.get(AuthenticationService);
const authHeaders = auth.getAuthHeader();
const authReq = request.clone({headers: authHeaders});
return next.handle(authReq).do((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
}
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
if (err.status === 403) {
this.router.navigate(['login']);
}
}
});
}
}
它在 Angular 5 中很旧，但现在我已经迁移到 6 并且这不再起作用了。
它说 Observable 类型上不存在属性“do”。
我也试图从这个线程实现解决方案：LINK 没有工作。 …
我希望如果任何 api 返回 401 错误响应，用户就会自动注销。为此，我拦截每个请求，一旦错误代码出现 401，我就会清除本地存储中的 jwt 令牌，并且身份验证防护会阻止但是在实现拦截器之后（这方面的示例非常少，并且文档中也没有提及），我无法命中任何 HTTP 请求。下面是我的代码。提前致谢。
import { Injectable, Injector } from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse} from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/throw'
import 'rxjs/add/operator/catch';
@Injectable()
export class ResponseInterceptor implements HttpInterceptor {
constructor() {
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).do((event: HttpEvent<any>) => {
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
// do error handling here
console.log('and the error is ');
console.log(err)
}
});
} …我有一个 HTTP 拦截器，在每次请求之前，我检查访问令牌是否已过期，如果是，我从我的服务订阅 http.post 调用，然后订阅它，当我获得新的访问令牌时，我将调用下一个。像这样处理（请求）：
this.auth.refreshAccessToken().subscribe((token: string) => {
this.auth.newAccessToken = token;
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
return next.handle(request);
});
问题是它正在抛出 TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
这让我觉得我在那里打错了 http.post 调用。
编辑 1：我还没有机会彻底测试这个，但到目前为止似乎一切正常。在返回整个地图之前我有一个 console.log 但它没有触发，但是，其他一切都有效，并且每次我获得新的访问令牌并且 DID 发生时，我都会在任何地方更新 currentUser/权限，因此出于所有意图和目的，它似乎工作，这是更新的代码：
mergeMap(token => {
this.auth.newAccessToken = token;
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
return next.handle(request);
})
typescript angular-http-interceptors angular angular-observable angular-httpclient
有谁知道是否可以使用 AngularFire 库拦截对 firebase cloudstore 的请求？
我想实现一个功能，在从云存储中添加/更新/删除项目时，在角度拦截器中显示吐司消息
我正在使用 AngularFire 库和 AngularFirestore。
我的拦截器适用于其他 http 请求，但在仅使用 Angular 内置 HttpClient 库使用该库时则无法正常工作。我可以在网络控制台中看到在从 cloudfirestore 添加/更新/删除项目时发出了 xhr 请求。
如何拦截来自 AngularFirestore 库的请求？
我正在使用@angular/fire 5.1.2 和 angular 7.2
谢谢，贾尼
firebase angular-http-interceptors angular google-cloud-firestore
我正在开发一个 Angular 库，其中有一个提供HttpInterceptor. 主要思想是让这个拦截器在导入此身份验证模块的任何应用程序中自动工作，而无需对其进行任何额外的设置。
到目前为止我所拥有的是以下内容：
认证模块
@NgModule({
imports: [ConcreteAuthModule],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: BearerInterceptor,
multi: true
}
]
})
export class AuthenticationModule {
static forRoot(config: AuthConfig): ModuleWithProviders {
return {
ngModule: AuthenticationModule,
providers: [
{
provide: AUTH_CONFIG,
useValue: config
}
]
};
}
}
具体验证模块
@NgModule({
imports: [ThirdPartyLibModule],
providers: [
{
provide: AuthenticationService,
useClass: ConcreteAuthService
}
]
})
export class ConcreteAuthModule { }
承载拦截器
@Injectable()
export class BearerInterceptor implements HttpInterceptor {
constructor(private authService: AuthenticationService) { } …在我的 Angular 8 项目中，我实现了最简单的方法：HttpInterceptor，只传递请求，而不执行任何操作
在我的 Angular 8 项目中，我实现了一个简单的方法HttpInterceptor，只需克隆原始请求并添加一个参数：
@Injectable()\nexport class RequestHeadersInterceptor implements HttpInterceptor {\n\n intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {\n // original code return next.handle(request) // pass-by request as-is\n\n return next.handle(request.clone({\n params: request.params.set(\'language\', \'en\') }\n ));\n }\n}\n\n在我的服务中，我有一个getFoos()方法可以进行 HTTP 调用，该调用将被以下内容拦截RequestHeadersInterceptor：
import { HttpClient } from \'@angular/common/http\';\nimport { Injectable } from \'@angular/core\';\nimport { finalize } from \'rxjs/operators\';\nimport { Foo } from \'.\';\n\n@Injectable({\n providedIn: \'root\'\n})\nexport class FooService {\n constructor(private …我有一个HttpInterceptor，出于开发目的，我想打印发出请求的函数的堆栈跟踪：
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('Who has made this request?', new Error().stack);
return next.handle(request);
}
}
控制台日志的输出为：
at HttpInterceptorService.intercept (:4200/main.js:1344) [angular]
at HttpInterceptorHandler.handle (:4200/vendor.js:30718) [angular]
at HttpXsrfInterceptor.intercept (:4200/vendor.js:31484) [angular]
at HttpInterceptorHandler.handle (:4200/vendor.js:30718) [angular]
at HttpInterceptingHandler.handle (:4200/vendor.js:31549) [angular]
at MergeMapSubscriber.project (:4200/vendor.js:30457) [angular]
at MergeMapSubscriber._tryNext (:4200/vendor.js:112207) [angular]
at MergeMapSubscriber._next (:4200/vendor.js:112197) …设置：
我有一个 Web 组件（Angular 10）正在 Angular 10 应用程序中使用。Web 组件对 Web API 进行 Httpclient 调用，以获取一些数据来填充菜单下拉列表。该 Web 组件是使用 Angular 10 制作 Web 组件的标准方法制作的。
Web 组件通过主客户端应用程序中的脚本加载。这是来自父应用程序的 angular.json 文件。
1."scripts":
[
"projects/web-component-test/src/assets/plugin.bundle.js"
]
一切正常，除了我们收到 401 错误（未经授权），因为端点要求用户登录。通过正常工作，还有其他控件可以根据需要显示下拉列表，它从 API 获取数据呼叫不会被填充。
流程：
来自父应用程序的 Http 调用工作正常；jwt 令牌将添加到标头中以调用受保护的 API。来自子 Web 组件的调用在标头中没有 jwt 令牌，因此会失败并出现 401 错误。
httpinterceptor：我们在主客户端应用程序（Web 控件的父级）上有一个 httpinterceptor 。从主应用程序发出的 Http 调用将通过拦截器进行路由，如果需要，令牌将附加到标头。
从子 Web 组件发出的调用不会触发父应用程序中的拦截器？
问题： 如何从子 Web 组件路由通过父级中的 http 拦截器进行调用，以便可以添加令牌。
我尝试过的事情：如果我这样做，我可以让网络组件正常工作：
** …
我有一个用例，我需要限制传出 http 请求的数量。是的，我确实在服务器端有速率限制器，但前端也需要限制活动 http 请求的数量。因此，我正在尝试实现一个滑动窗口协议，在任何时候我都会只有 n 个活跃请求。
这种使用 Rxjs 的方法通常工作得很好，请参见此处： https: //jsbin.com/pacicubeci/1/edit ?js,console,output
但我不清楚如何对 http 拦截器使用相同的逻辑。我的以下尝试在编译时失败，并出现以下错误：
“Subscription”类型缺少“Observable<HttpEvent>”类型中的以下属性：_isScalar、source、operator、lift 以及其他 114 个属性。(2740)
这样，我怎样才能返回一个可观察对象并同时在http拦截器中维护一个队列？我的方法有缺陷吗？我可以使用 http 拦截器来限制 http 速率吗？
@Injectable()
export class I1 implements HttpInterceptor {
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
const modified = req.clone({ setHeaders: { "Custom-Header-1": "1" } });
return next
.handle(req)
.do((ev: HttpEvent<any>) => {
if (ev instanceof HttpResponse) {
console.log(ev);
}
})
.pipe(
bufferTime(1000, null, 1),
filter(buffer => buffer.length > 0),
concatMap(buffer => of(buffer).pipe(delay(1000)))
)
.subscribe(console.log);
} …sliding-window rxjs angular-http-interceptors angular rxjs-subscriptions