4

는 내가 인증 HttpInterceptor 있습니다Angular4 인터셉터 변화 대응

import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, 
HttpRequest} from '@angular/common/http'; 
import {AuthService} from '../service/auth.service'; 
import {Observable} from 'rxjs/Observable'; 
import {Injectable} from '@angular/core'; 
import {Router} from '@angular/router'; 

@Injectable() 
export class AuthInterceptor implements HttpInterceptor { 
    constructor(private authService: AuthService, 
       private router: Router) { 
    } 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    const authHeader = this.authService.getToken(); 
    const clone = req.clone({headers: req.headers.set('Authorization',authHeader)}); 
    return next.handle(clone).do(() => { 
}, err => { 
    console.log(err); 
    if (err instanceof HttpErrorResponse && err.status === 401) { 
    this.authService.clearToken(); 
    this.router.navigate(['/auth/signin']); 
    return Observable.empty(); 
     } 
    }); 
    } 
} 

내가 페이지를 로그인하는 사용자를 리디렉션 해요 (401) 받고 있어요,하지만 오류가 계속 서비스에 갈 때이 인터셉터는 잘 작동하지만, 그 서비스에서 나는 오류 메시지를 보여 주며,이 메시지는 서명 페이지에 표시됩니다. 그래서 응답을 변경하거나이 경우 오류를 반환하지 않으려면 if (err instanceof HttpErrorResponse && err.status === 401) { 블록에서 수행하고 싶습니다.

return Observable.empty(); 

답변

7

next.handle(clone).do() 작동하지 않습니다 -이 그런 행동을 일으키는 것입니다. do() 연산자는 부작용 만 제공하기위한 것일뿐 실제로 관측 가능한 파이프의 데이터 흐름과 오류 처리에는 영향을 미치지 않습니다. 본질적으로 그것은 "do this (do) (do) (do) (section)"이없는 것처럼이 일이 일어 났을 때 그리고 계속 그 다음에 계속된다. 오류를 억제하려면 연산자 catch()을 사용해야합니다.

코드는 거의 같은 것이다 :

@Injectable() 
export class AuthInterceptor implements HttpInterceptor { 
    constructor(private authService: AuthService, 
       private router: Router) { 
    } 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
     const authHeader = this.authService.getToken(); 
     const clone = req.clone({headers: req.headers.set('Authorization',authHeader)}); 
     return next.handle(clone).catch(err => { // <-- here 
      console.log(err); 
      if (err instanceof HttpErrorResponse && err.status === 401) { 
       this.authService.clearToken(); 
       this.router.navigate(['/auth/signin']); 
       return Observable.empty(); 
      } 
      // we must tell Rx what to do in this case too 
      return Observable.throw(err); 
     }); 
    } 
} 
+0

당신이 캐치와 작은 예제를 적어주세요 수 있습니까? – user2870934

+0

@ user2870934, 내 대답을 편집했습니다. 코드는 거의 동일합니다. 당신은 매우 가깝습니다. –