Angular 18.0.5 没有看到拦截器并且无法工作

Question

我相信独立组件和 HttpInterceptor 有一个错误！

export const appConfig: ApplicationConfig = {
  providers: [
    // provideHttpClient(withInterceptorsFromDi()),
    // {  provide:  HTTP_INTERCEPTORS, useClass: 
   // HttpAuthenticationInterceptorService, multi: true  },
    
    provideHttpClient(withInterceptors([interceptorFN])),

    provideRouter(routes),
    provideAnimationsAsync(),
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore())
  ]
};
 

然后在provider中添加拦截器。

//Main.ts
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));


// bootstrapApplication(AppComponent, {
//   providers: [
//     provideHttpClient(withInterceptorsFromDi()),
//     {  provide:  HTTP_INTERCEPTORS, useClass: HttpAuthenticationInterceptorService, multi: // true  },

//     provideHttpClient(withInterceptors([interceptorFN])),
//     provideRouter(routes),
//     provideAnimationsAsync(),
//     provideFirebaseApp(() => initializeApp(environment.firebase)),
//     provideAuth(() => getAuth()),
//     provideFirestore(() => getFirestore())


//   ]
// }).catch((err) => console.error(err));

我创建了一个服务来使用，也尝试了 app.config.ts 中的 Di 模式，但也不起作用。

//interception Service
@Injectable({
  providedIn: 'root'
})
export class HttpAuthenticationInterceptorService implements HttpInterceptor {

  constructor(private auth: AuthenticationService) {
  }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.auth.tokenResponse$.pipe(take(1), exhaustMap(response => {
      console.log("tokenResponse$; ", response);
      if (!response) {
        console.log("No Response; ", response);
        return next.handle(req);
      }
      /**Clonando o request , pois original não pode ser SETADO, é IMUTÁVEL */
      const modifiedHeader = req.clone({
        params: new HttpParams().set('auth', response.idToken)

        // setHeaders: {
        //   Authorization: response.idToken
        // }
        /**Ou */
      });
      return next.handle(modifiedHeader);
    }));
  }

  
}

我创建了一个函数来使用拦截 withInterceptors(...) 也不起作用

  
     
export const interceptorFN: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthenticationService);

  return authService.tokenResponse$.pipe(take(1), exhaustMap(token => {
    console.log("dentro do interceptor");
    if (!token) {
      return next(req);
     }
     const modifiedHeader = req.clone({
      params: new HttpParams().set('auth', token.idToken)
     })
     return next(modifiedHeader);
  }));

}

我尝试将提供：[...]放在app.components中

Answer 1

只有通过

HttpClient

发出的请求才会被角度拦截器拦截，我认为您没有使用通过

HttpClient

发出的任何 API 调用。

注意：像

signInWithEmailAndPassword

这样的 Firebase 方法和其他 Firebase 身份验证方法不会被角度拦截器拦截，因为它们不是通过

HttpClient

实现的。