作者:阿笨猫 | 来源:互联网 | 2023-01-27 14:15
我尝试使用新的Angular 4.3
拦截器为所有请求设置authorithation标头.但是,它不起作用.我将断点设置为拦截器intercept
方法,浏览器没有命中它,所以它似乎angular
只是忽略了我的拦截器.请帮助我,提前谢谢.
user.service.ts:
import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
import {Observable} from "rxjs";
import {Http} from "@angular/http";
@Injectable()
export class UserService {
constructor(public http: Http) {
}
public getContacts(): Observable {
return this.http.get('/users/contacts').map(cOntacts=> contacts.json());
}
}
token.interceptor.ts
import {Injectable} from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor
} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {AuthService} from "./shared/auth.service";
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(public auth: AuthService) {
}
intercept(request: HttpRequest, next: HttpHandler): Observable> {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${this.auth.getToken()}`
}
});
return next.handle(request);
}
}
app.module.ts:
@NgModule({
...
providers: [
...
{provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
]
})
小智..
71
TL; DR
确保整个应用程序中有一个HttpClientModule导入(推荐)或为每个导入提供有效的拦截器配置(ofc仅用于测试).
确保不会在应用程序的不同模块中多次导入HttpClientModule.我在延迟加载的模块中导入它.每次导入都会使用导入模块中的配置创建HttpClient的新副本,因此将覆盖根模块中提供的拦截器.
1> 小智..:
TL; DR
确保整个应用程序中有一个HttpClientModule导入(推荐)或为每个导入提供有效的拦截器配置(ofc仅用于测试).
确保不会在应用程序的不同模块中多次导入HttpClientModule.我在延迟加载的模块中导入它.每次导入都会使用导入模块中的配置创建HttpClient的新副本,因此将覆盖根模块中提供的拦截器.
遗憾的是,在角度文档中没有对此进行解释.我在我的SharedModule中导入了HttpClientModule,因此我的懒惰模块中没有调用拦截器.希望我找到你的答案,**只在我的AppModule中声明HttpClientModule,一切都很完美
你救了我的一天!
2> Maxim Kuzmin..:
原因 - 您使用旧Http
服务而不是新服务,引入Angular 4.3
- HttpClient
(Http
将被弃用).此外,HttpClient
默认情况下,在JSON响应类型中,您应该省略.map(cOntacts=> contacts.json())
.
app.module.ts
...
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule,
...
],
providers: [
...
{provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
]
...
})
user.service.ts
...
import {HttpClient} from "@angular/common/http";
@Injectable()
export class UserService {
constructor(public http: HttpClient) {
}
public getContacts(): Observable {
return this.http.get('/users/contacts');
}
}