Angular 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塊。

 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

添加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.empty();
                }
            }
            return Observable.throw(error);
        })
        .finally(() => {
            this.onEnd();
        })
}

Answer 4

我為此感到難過。

就我而言，我請求一個API，但是當我收到401消息時。 我將轉到登錄頁面。

但是路由器無法正常工作。

我最終發現，現有請求必須完成。

方法是接收錯誤消息並由請求者處理它。

只需調用“ resolve（err）”

因為您應該讓他們先走。 您可以在最近的請求調用之前路由導航網址。

否則，將保留現有請求。

流程..

1）請求http呼叫。

2）在攔截器中收到響應401錯誤。

3）路線

4） 拋出錯誤

5）在錯誤區域收到錯誤。

6） resolve（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);
          }**);
      }
    );
  }

攔截器

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);
    });
  }
}