在 angular 中拦截响应 headers

Question

我正在用 angular5 创建一个基于令牌的身份验证系统。对于每个请求，我都会发送一个包含令牌 (X-SDB-AUTH-TOKEN) 的 header，并通过一些带有 401 或 403 状态代码的响应，我发送一个响应 header 来识别禁止状态的类型，例如 forbidden因为密钥不匹配 return 响应 header AUTH-STATUS :1 并且如果用户未处于活动状态 AUTH-STATUS:2 等。我想检查拦截器以及状态代码是否为 401 or 403 如果 AUTH-STATUS:2 重定向到 user not active page 否则如果状态代码是 401 or 403 并且如果 AUTH-STATUS:1 重定向到 key not match page。如何一起验证响应代码和 header 值。我们如何轻松读取响应 headers 和错误代码。到目前为止我的代码是

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from 
'@angular/common/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/throw'
import 'rxjs/add/operator/catch';

 @Injectable()
    export class TokenInterceptor implements HttpInterceptor {

  constructor(private router: Router) {
 }

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

if (localStorage.getItem('authToken')) {    
  req = req.clone({
    setHeaders: {
      'X-SDB-AUTH-TOKEN': localStorage.getItem('authToken')
    }
  });

}
return next.handle(req)
  .catch((error, caught) => {
    if (error.status === 401 || error.status === 403) {
       localStorage.removeItem('authToken');  
       this.router.navigate(['/testLogin']);   
    }

    return Observable.throw(error);
  }) as any;
 }  
}

Answer 1

catch 运算符有两个参数 .catch((error, caught) => {})。

error 是 HttpErrorResponse 类型，它有一个字段 headers 允许您访问 headers collection.

在 angular 中拦截响应 headers

Intercept response headers in angular

interceptor

response-headers

angular