添加HTTP拦截器后登录不起作用-Angular 5

Question

我最近开始处理别人启动的一个项目，我决定实现HTTP Interceptor，但在我完成后，我无法再登录了，就像我写错了用户名/密码一样(我没有(，但当我登录时，一切都很好。这是我的代码-

拦截器：

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(public auth: AuthService) {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${this.auth.getToken()}`
}
});
return next.handle(request);
}
}

登录：

// in http service
public postAuth(url: string,  body?: object): Observable<any> {
return this.http.post(this.baseUrl + url, body)
.pipe(
catchError(error => new ErrorObservable(error))
);
}
// in auth service
login(email: string, password: string): void {
const body = {username: email, password: password};
this._http.postAuth('/auth/waplogin/', body)
.map(res => {
return {
token: res.token,
firstName: res.user.first_name,
lastName: res.user.last_name,
id: res.user.uuid
}
})
.subscribe(
loggedUserInfoToken => {
sessionStorage.setItem('loggedUserInfoToken', JSON.stringify(loggedUserInfoToken));
this.router.navigate(['/dashboard']);
},
err => {
this.loginErr = err.statusText;
this.checkError(this.loginErr);
}
);
}

不确定它是否被链接，但这是它停止工作的时候，控制台中没有错误。

编辑：完成了，只是更改了这个部分：

if (this.auth.isLoggedIn()) {
request = request.clone({
setHeaders: {
Authorization: `Token ${this.auth.getToken()}`
}
});
}

没有看到代码中存在此方法。。

Answer 1

我相信this.auth.getToken()正在从sessionStorage获取存储的令牌。如果不是这种情况，请确保正确检索该令牌。

此外，您可以尝试忽略拦截器中的身份验证请求

//Check for url. If it is login url then return    
if (request.url.includes('/auth/waplogin/')) {
return next.handle(request);
}

更新的拦截器应该是这样的-

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(public auth: AuthService) {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
//Check for url. If it is login url then return    
if (request.url.includes('/auth/waplogin/')) {
return next.handle(request);
}
request = request.clone({
setHeaders: {
Authorization: `Bearer ${this.auth.getToken()}`
}
});
return next.handle(request);
}
}

Answer 2

在app.module.ts中添加：

providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true,
},
]

http-intercepter.ts:

/**
* 
* @param req - parameter to handle http request
* @param next - parameter for http handler
*/
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const started = Date.now();
/**
* Handle newly created request with updated header (if given)
*/
return next.handle(req).do((event: HttpEvent<any>) => {
/**
* Sucessfull Http Response Time.
*/
if (event instanceof HttpResponse) {
const elapsed = Date.now() - started;
}
}, (err: any) => {
/**
* redirect to the error_handler route according to error status or error_code
* or show a modal
*/
if (err instanceof HttpErrorResponse) {
switch (err.status) {
}
}
});
}