在尝试注入AuthenticationService时,我收到以下消息:“未捕获的错误:无法解析ErrorInterceptor的所有参数:(?)”。
error.interceptor.ts
import { Injectable } from '@angular/core';
import ...
import { AuthenticationService } from '@/_services';
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService) {}
intercept(request: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
return next.handle(request).pipe(catchError(err => {
if (err.status === 401) {
// auto logout if 401 response returned from api
this.authenticationService.logout();
location.reload(true);
}
const error = err.error.message || err.statusText;
return throwError(error);
}))
}
}
authentication.service.ts
import { Injectable } from '@angular/core';
import ...
@Injectable({ providedIn: 'root' })
export class AuthenticationService {
private currentUserSubject: BehaviorSubject<User>;
public currentUser: Observable<User>;
constructor(private http: HttpClient) {
this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
this.currentUser = this.currentUserSubject.asObservable();
}
public get currentUserValue(): User {
return this.currentUserSubject.value;
}
login(username, password) {
...
}
logout() {
...
}
}
app.module.ts 包含:
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
]
我正在使用Angular 8。 完整的错误代码:
Uncaught Error: Can't resolve all parameters for ErrorInterceptor: (?).
at syntaxError (compiler.js:2687)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:21355)
at CompileMetadataResolver._getTypeMetadata (compiler.js:21248)
at CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:21470)
at CompileMetadataResolver.getProviderMetadata (compiler.js:21479)
at eval (compiler.js:21417)
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (compiler.js:21377)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:21096)
at JitCompiler._loadModules (compiler.js:27143)
答案 0 :(得分:1)
问题是循环依赖。 AuthenticationService
需要HttpClient
,HttpClient
需要Interceptors
,ErrorInterceptor
需要AuthenticationService
。
为解决此问题,您需要将AuthenticationService
分为两层-一层用于存储身份验证数据,另一层用于API通信。
class AuthenticationStore {
storeData(authData) {}
getData(): AuthData {}
clearData() {}
假设您有AuthenticationStore
。然后ErrorInterceptor
将使用AuthenticationStore
而不是AuthenticationService
。
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authenticationStore: AuthenticationStore) {}
intercept(request: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
return next.handle(request).pipe(catchError(err => {
if (err.status === 401) {
// auto logout if 401 response returned from api
this.authenticationStore.clearData();
location.reload(true);
}
const error = err.error.message || err.statusText;
return throwError(error);
}))
}
}
或者您可以使用喷油器,这是较脏的解决方案。
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private injector: Injector) {}
intercept(request: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
return next.handle(request).pipe(catchError(err => {
if (err.status === 401) {
// auto logout if 401 response returned from api
const authenticationService = this.injector.get(AuthenticationService);
authenticationService.logout();
location.reload(true);
}
const error = err.error.message || err.statusText;
return throwError(error);
}))
}
}