Angular 7 HTTP拦截器不工作
Angular 7 HTTP拦截器不工作
提问于 2019-03-13 13:59:22
我是Angular的新手，我正在尝试实现api调用，在所有api上发送标头中的令牌，所以我使用Interceptor。
我无法在请求中设置标头。
jwt.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
constructor() { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let currentUser = localStorage.getItem('useremail')
let currentUserToken = localStorage.getItem('token')
if (currentUser && currentUserToken) {
request = request.clone({
setHeaders: {
'Authorization': `${currentUserToken}`
}
});
}
// console.log("Request", request)
return next.handle(request);
}
}app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppUserListingComponent } from './app-user-listing/app-user-listing.component';
import { JwtInterceptor } from './jwt.interceptor';
@NgModule({
providers: [ { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true } ],
bootstrap: [AppComponent]
})
export class AppModule { }user-listing.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class UserListingService {
apiUrl = "URL";
constructor(
private http: HttpClient
) { }
fetchAllUsers() {
return this.http.get(`${this.apiUrl}/fetchAdminsUsers`)
}
}我的代码不能工作的原因是什么？
提前感谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-08-31 04:49:50
在您的app.module.ts代码中没有import: [HttpClientModule]。您是否导入了HttpClientModule
我遇到了类似的问题，angular 8.x的http拦截器不能正常工作。
Stack Overflow用户
发布于 2019-05-23 07:00:43
Authorization是一个特殊的头部，您需要在请求中添加withCredentials: true才能添加。
request = request.clone({
setHeaders: {
'Authorization': `${currentUserToken}`
},
withCredentials: true
});Stack Overflow用户
发布于 2019-05-16 14:28:53
尝试使用如下所示的实例。
return next.handle(request).pipe(
tap(
event => {
if(event instanceof HttpResponse){
//api call success
console.log('success in calling API : ', event);
}
},
error => {
if(event instanceof HttpResponse){
//api call error
console.log('error in calling API : ', event);
}
}
)
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55135340
复制相关文章
相似问题