각도 4.3 HttpClient 인터셉터

Question

응답이 401 일 때 경로 리디렉션이 작동하지 않는 이유를 알려주십시오. Console.log는 응답 개체 및 상태를 401로 표시하지만 라우터가 사용자를 로그 아웃 페이지로 리디렉션하지 않습니다.

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

      this.onStart(); 
      return next.handle(req).do((event: HttpEvent<any>) => 
       (error: any) => { 
        if (error instanceof HttpErrorResponse) { 
         if (error.status == 0 || error.status == 401 || error.status == 404 || error.status == 500 || error.status == 503) { 
          this.storageService.writeToStorage(Constants.STORAGE_KEY_ERROR, error); 
          console.log(error); 
          this.router.navigateByUrl(Constants.ROUTE_ERROR_DYNAMIC + error.status); 
         } 
        } 
        else{ 
         return Observable.throw(error); 
        } 

       }).finally(() =>{ 
        this.onEnd(); 
       }) 
     } 

Answer 1

당신은 작업이

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

@Injectable() 
export class AngularInterceptor implements HttpInterceptor { 

    constructor(private router : Router){} 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    return next.handle(req).do(event => {}, err => { 
     if(err instanceof HttpErrorResponse){ 
      console.log("Error Caught By Interceptor"); 
      //Observable.throw(err); 
      this.router.navigate(['a4']); 
     } 
    }); 
    } 
} 

Answer 2

개정 코드 같은 것을 시도 할 수 있습니다. catch 블록을 사용하도록 코드를 변경하십시오. 추가 return Observable.empty();

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

     this.onStart(); 
     return next.handle(req) 
      .catch((error: any) => { 
       if (error instanceof HttpErrorResponse) { 
        if (error.status == 0 || error.status == 401 || error.status == 404 || error.status == 500 || error.status == 503) { 
         this.storageService.writeToStorage(Constants.STORAGE_KEY_ERROR, error); 
         this.router.navigateByUrl(Constants.ROUTE_ERROR_DYNAMIC + error.status); 
        } 
       } 
       return Observable.throw(error); 
      }) 
      .finally(() => { 
       this.onEnd(); 
      }) 
    } 

Answer 3

내가이 가진 시간의 지옥을 가지고 내 경우

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

    this.onStart(); 
    return next.handle(req) 
     .catch((error: any) => { 
      if (error instanceof HttpErrorResponse) { 
       if (error.status == 0 || error.status == 401 || error.status == 404 || error.status == 500 || error.status == 503) { 
        this.storageService.writeToStorage(Constants.STORAGE_KEY_ERROR, error); 
        this.router.navigateByUrl(Constants.ROUTE_ERROR_DYNAMIC + error.status); 
        return Observable.empty(); 
       } 
      } 
      return Observable.throw(error); 
     }) 
     .finally(() => { 
      this.onEnd(); 
     }) 
} 

Answer 4

에 도움을 주었다.

필자의 경우 API를 요청했지만 401 메시지가 왔을 때. 로그인 페이지로 이동합니다.

하지만 라우터가 작동하지 않았습니다.

마지막으로 발견 한 것은 기존 요청을 완료해야한다는 것입니다.

길은 오류 메시지를 받고 요청자가 처리하는 것입니다. 당신이 그들을 먼저 가게해야하기 때문에

은 "해결 (ERR)"

를 호출합니다. 최신 요청 요청 전에 탐색 URL을 라우팅합니다.

그렇지 않으면 기존 요청이 유지됩니다.

흐름 ...

1) http 호출을 요청하십시오.

2) 수신자가 인터셉터에서 401 오류를 수신했습니다.

3) 라우팅 경로

4) 던져 오류

5)의 내용으로 에러의 영역에서 오류가 발생했습니다.

6) 해결 (ERR) 또는 다른 메시지 서비스에서

.

getUserInfos(): Promise<any> { 
    return new Promise((resolve, reject) => { 
     this.http.get('/api/userinfo/list') 
      .subscribe((response: any) => { 
      this.userInfos = response.data; 

      if (this.searchText && this.searchText !== '') { 
       this.userInfos = FuseUtils.filterArrayByString(this.userInfos, this.searchText); 
      } 

      this.userInfos = this.userInfos.map(userInfo => { 
       return new UserInfo(userInfo); 
      }); 

      this.onUserInfosChanged.next(this.userInfos); 
      resolve(this.userInfos); 
      }, **err => { 
      resolve(err); 
      }**); 
     } 
    ); 
    } 

.Interceptor

import { 
    HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, 
    HttpResponse 
} from '@angular/common/http'; 
import {Observable} from 'rxjs/Observable'; 
import {ActivatedRoute, Router} from '@angular/router'; 
import {Injectable} from '@angular/core'; 
import 'rxjs/add/observable/throw'; 
import {FuseConfigService} from './config.service'; 
import 'rxjs/add/observable/empty'; 

@Injectable() 
export class AuthInterceptor implements HttpInterceptor { 

    constructor(private router: Router, private fuseConfig: FuseConfigService) {} 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    console.log('INTERCEPT REQUEST: ', req); 
    return next.handle(req) 
     .map((event: HttpEvent<any>) => { 
     if (event instanceof HttpResponse && ~(event.status/100) > 3) { 
      console.log('INTERCEPT RESPONSE[' + event.status + ']: ', event); 
     } else { 
      console.log('INTERCEPT RESPONSE[' + event.type + ']: ', event); 
      if(event['body'] && event['body'].code == -444) { 
      this.router.navigate(['pages/auth/login']); 
      } 
     } 
     return event; 
     }) 
     .catch(
     (err: HttpErrorResponse) => { 
     console.log('INTERCEPT ERR[' + err.status + ']: ', err.statusText + '/' + err.url); 
     if(err.status === 401) { 
      this.fuseConfig.setSettings({ 
      layout: { 
       navigation: 'none', 
       toolbar : 'none', 
       footer : 'none' 
      } 
      }); 
      **this.router.navigate(['pages/auth/login']); 
      return Observable.throw('Unauthorized');** 
     } 
     return Observable.throw(err); 
    }); 
    } 
}