我编写了一个拦截器来获取我从服务器发送的令牌并将其添加到后续请求中:
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private store: Store) {}
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return this.store.select(selectUser).pipe(
switchMap((user) => {
if (user && user.token) {
const authRequest = req.clone({
setHeaders: {
Authorization: `Bearer ${user.token}`,
},
});
return next.handle(authRequest);
}
return next.handle(req);
})
);
}
}
根据Angular 建议,我为这个拦截器编写了一个单独的提供程序:
import { Provider } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from '../http-interceptors/authInterceptor';
export const authInterceptorProvider: Provider = {
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true,
};
然后将其提供给我的基本组件(我使用的是独立API,所以AppComponent在某种程度上是我的Main):
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(HttpClientModule),
authInterceptorProvider,
provideState(feedFeature),
provideState(authFeature),
provideStore(),
provideEffects(feedEffects, authEffects),
provideRouter(appRoutes),
provideHttpClient(),
provideStoreDevtools({
maxAge: 25,
logOnly: !isDevMode(),
autoPause: true,
trace: false,
traceLimit: 75,
}),
],
});
行为是这样的,如果我删除这行:
importProvidersFrom(HttpClientModule)
拦截器根本不工作,但我添加了它,我的浏览器在拦截器工作的情况下发出了无限的请求(我添加了一个console.log).
我判断了请求头,但也没有发送Auth头(User&;&;user.Token都存在,console.log在if语句中)
有人知道为什么要发送无限的请求吗?和/或为什么没有设置标头?
此外,我不是最好的Angular ,特别是在独立的API,我很确定我做了一些错误的事情,添加了两者:
importProvidersFrom(HttpClientModule) and provideHttpClient()