[英]Error: "You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable." in my Auth Interceptor
I want to intercept every request to api and check the status code so that it can display a message or redirect to a specific component, but it is giving the following error:我想拦截对 api 的每个请求并检查状态代码,以便它可以显示消息或重定向到特定组件,但它给出了以下错误:
main.js:1580 TypeError: You provided 'undefined' where a stream was expected. main.js:1580 TypeError:您在需要流的地方提供了“未定义”。 You can provide an >Observable, Promise, Array, or Iterable.at subscribeTo (vendor.js:179688)at subscribeToResult(vendor.js:179824) at MergeMapSubscriber._innerSub (vendor.js:175271) at mergeMapSubscriber._tryNext (vendor.js:175265) at MergeMapSubscriber._next (vendor.js:175248) at MergeMapSubscriber.next (vendor.js:170316) at Observable._subscribe (vendor.js:172287) at Observable._trySubscribe (vendor.js:169772) at Observable.subscribe (vendor.js:169758) at MergeMapOperator.call (vendor.js:175233)您可以在 subscribeToResult(vendor.js:179824) at MergeMapSubscriber._innerSub (vendor.js:175271) at mergeMapSubscriber._tryNext (vendor. js:175265) at MergeMapSubscriber._next (vendor.js:175248) at MergeMapSubscriber.next (vendor.js:170316) at Observable._subscribe (vendor.js:172287) at Observable._trySubscribe (vendor.js:169248) at Observable._trySubscribe (vendor.js:169772) .subscribe (vendor.js:169758) 在 MergeMapOperator.call (vendor.js:175233)
This is my AuthInterceptor:这是我的AuthInterceptor:
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { tap } from 'rxjs/operators';
import { CommonService } from '../common.service';
import { Router } from '@angular/router';
import { AuthenticationService } from './authentication.service';
@Injectable({
providedIn: 'root'
})
export class AuthInterceptorService implements HttpInterceptor {
constructor(
private common: CommonService,
private router: Router,
private auth: AuthenticationService
) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.headers.get('No-Auth') === 'True') {
return next.handle(req.clone());
}
// To attach header on every request
if (localStorage.getItem('currentUser') != null) {
const clonedreq = req.clone({
headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('currentUser'))
});
return next.handle(clonedreq).pipe(tap(
succ => { },
err => {
if (err.status === 401) {
this.router.navigateByUrl('/login');
} else if (err.status === 403) {
this.router.navigateByUrl('/Forbidden');
} else if (err.status === 400) {
this.router.navigateByUrl('/error404');
}
}
));
} else {
this.router.navigateByUrl('/login');
}
}
}
I can't figure out the line or block which is causing it, as it is not written any where in the error.我无法弄清楚导致它的行或块,因为它没有写在错误的任何地方。 The project is compiled just fine.该项目编译得很好。 this error is shown in almost every page of the project where a request is sent to WEB Api.该错误几乎出现在项目的每个页面中,其中向 WEB Api 发送请求。
In the else block you are missing the return statement.在 else 块中,您缺少 return 语句。 Add return next.handle(req.clone());
添加return next.handle(req.clone());
in else block when localStorage.getItem('currentUser')
is null当localStorage.getItem('currentUser')
为 null 时在 else 块中
Rishabh, others do link this error with the existence of 'interceptors', this could very well be the case. Rishabh,其他人确实将此错误与“拦截器”的存在联系起来,这很可能是这种情况。 However, today I got the exact same TypeError.但是,今天我得到了完全相同的 TypeError。 My app, currently still in development, does not make use of 'interceptors' (may be in the future who knows).我的应用程序目前仍在开发中,不使用“拦截器”(可能在未来谁知道)。 It's an Angular app currently up-to-data (version 9.0.2) connection to an API (functions firebase).它是一个 Angular 应用程序,当前与 API(函数 firebase)建立数据连接(版本 9.0.2)。 I was implementing a new components (crud) 'contractors' on which I decided to make use of 'angular-in-memory-web-api' prior storing data at the backend我正在实施一个新的组件(crud)'contractors',我决定在后端存储数据之前使用'angular-in-memory-web-api'
As soon as I had implemented the module 'InMemoryWebApiModule.forRoot(ContractorData)' in the 'imports' section of the App.Module, I noticed while retrieving another entity I suddenly could not reach anymore the API noticing in the browser console:一旦我在 App.Module 的“导入”部分实现了模块“InMemoryWebApiModule.forRoot(ContractorData)”,我注意到在检索另一个实体时突然无法访问浏览器控制台中的 API:
ERROR TypeError: You provided 'undefined' where a stream was expected.错误类型错误:您在需要流的地方提供了“未定义”。 * You can provide an Observable, Promise, Array, or Iterable. * 您可以提供 Observable、Promise、Array 或 Iterable。
So, my hypothesis is: implementing the ImMemoryWebApiModule interfers (in my case) the HttpClient process in such a way, it removes or deletes information on the request sending to the api.因此,我的假设是:实现 ImMemoryWebApiModule 以这种方式干扰(在我的情况下)HttpClient 进程,它删除或删除有关发送到 api 的请求的信息。
Hopefully, this a little help you to investigate you problem!希望这对您调查问题有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.