标签: angular-http-interceptors

我正在使用一个非常简单的拦截器来检查响应拒绝403 Access Forbidden将用户重定向到登录,但它没有重定向.我可以将console.log直接放到$ location.path之前和之后的行,并且它永远不会发生.这事发生在别人身上过吗？我一直在盯着这个...原来我甚至不想使用$ location,但我不能注入ui.router而没有获得循环依赖,我也无法弄清楚如何摆脱这么多的位置应该让我感动,而我想到了.

.factory('AuthInterceptor', ['$q', '$location',
    function( $q, $location ) {

    var service = {
        responseError: function( responseRejection ) {

            // Authorization issue, access forbidden
            if( responseRejection.status === 403 ) {

                // TODO: show a login dialog, and/or redirect to login
                console.log("Response rejected. Redirecting to login...");

                $location.path('/login');
                $location.replace();

                console.log("Not so much with the redirecting... I'm still here");
            }

            // Propagate error to any chained promise handlers
            return $q.reject( responseRejection );
        }
    }

    return service;
}])

在我们的Angular 4.3项目中，我们分别有公共站点组件和安全站点（登录）组件。我们使用@angular/common/http. 我们想为public-site组件和secured-site组件实现不同的http拦截器。例如，

1. 公共站点组件 - 仅在拦截器下方应用
   LoggingInterceptor
2. 安全站点组件 - 在两个拦截器下方应用
   LoggingInterceptor
AuthTokenInterceptor（在请求标头中传递身份验证令牌）

我们尝试使用不同的拦截器HTTP_INTERCEPTORS在每个组件级别添加提供者详细信息@Component。但是请求不会进入任何拦截器。

仅当我们HTTP_INTERCEPTORS在@NgModule. 这里的问题是，公共站点 http 请求也会进入AuthTokenInterceptor不需要的。

那么我们应该如何解决这个问题呢？谢谢。

我有一个认证HttpInterceptor:

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

我在 Angular 5 中有一个有效的拦截器。它在 App.module 的提供者中注册，并正确拦截了从应用程序发出的所有请求。

问题是它不会拦截从应用程序使用的库发出的请求。

我正在使用开源库 (NGX-Jsonapi)，并且需要拦截器在库向后端发出的每个请求中提供令牌。

有人遇到同样的问题吗？

编辑：该库使用 HttpClient。

我已经构建了一个拦截器，用于向 PHP 后端发出 HTTP 请求。这个后端为应用程序提供了一个 JWT 令牌，我将它保存在 Ionic Storage 中。但我想从 Storage 中获取该令牌并将其作为标头添加到 HTTP 请求中。

下面是我的拦截器和硬编码令牌。这有效，我得到了后端的响应。

见更新@这篇文章的底部

http-interceptor.ts

import { HttpInterceptor, HttpRequest } from '@angular/common/http/';
import {HttpEvent, HttpHandler} from '@angular/common/http';
import { AuthProvider } from "../providers/auth/auth";
import {Injectable} from "@angular/core";
import {Observable} from "rxjs/Observable";
import {Storage} from "@ionic/storage";

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const changedReq = req.clone({headers: req.headers.set('Authorization', 'Bearer MY TOKEN')});
        return next.handle(changedReq);
    }

}

但是如何将令牌从存储中获取到标头中。我搜索了很多，大多数教程/示例都来自较旧的 HTTP 模块。如果有人有想法或有更新示例？

更新

OK 下面的代码发送令牌

intercept(req: HttpRequest<any>, …

我只是尝试使用 Angular Universal 预渲染一个组件，该组件使用 httpClient 从/static应用程序本身的文件夹中获取数据。

1. 如何在 Angular Universal 中正确使用 httpClient？
2. 是否可以从项目内部访问静态资产并在预渲染时使用 httpClient 获取它们？

我猜该文件不可访问，因为应用程序在预渲染时没有在任何服务器上运行。获取路径是相对的。稍后在远程服务器上获取文件有效，但是在预渲染期间“远程服务器”不可用还是？如何使这工作？

我确实收到了一个错误 [ERROR]，这是由httpClient.get(). 捕获错误错误消息为空。

基本上我有服务

doReqeust() = {
  return this.httpClient.get("./static/get.json")
}

并在组件中

onInit() {
  this.data = this.myService.doRequest();
}

并且视图比它通过异步管道绑定

{{ data.response.title | async }}

静态是项目中的静态文件夹。

我在控制台上记录日志时，无法在拦截器中获取自定义响应标头。控制台记录了拦截器httpResponse

``控制台日志响应''

HttpResponse {标头：HttpHeaders，状态：200，statusText：“确定”，确定：true，…}

HttpHeaders lazyInit：ƒ（）lazyUpdate：null normalizedNames：Map（0）{} proto ：对象ok：真实状态：200 statusText：“ OK”类型：4

我们还在服务器端添加了Access-control-expose-header。我仍然没有得到回应。不知道我是否在拦截器方法中错过了一些东西。

拦截器方法

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        req = req.clone({
            setHeaders: {
                'Accept': 'application/vnd.employee.tonguestun.com; version=1',
                'Content-Type': 'application/json',
            }
        });

    return next.handle(req)
        .do((ev: HttpEvent<any>) => {
            console.log(ev)
            if (ev instanceof HttpResponse) {
                console.log(ev.headers);
            }
            // return ev;
        })

}

拦截功能

网络标签中的自定义标题

访问控制允许凭证：true

访问控制允许方法：GET，POST，OPTIONS

访问控制允许来源：*

访问控制公开标头：访问令牌，客户端，到期，令牌类型，uid

访问令牌：haIXZmNWSdKJqN2by7JH1g

缓存控制：max-age = 0，私有，必须重新验证

客户端：j_2dxD7NVMjGeX8BbBuELA

内容类型：application / json; 字符集= utf-8

到期日：1525931943

在“网络”标签中获取自定义标题

这也是我的服务电话，在电话中也请注意“响应”。

服务电话

return this.http.post(`${environment.baseUrl}${environment.signup}`, data, {observe: "response"})
  .map(response => …

我是角度5的新手.如何编写一个通用函数来为角度为5的每个HTTP请求显示微调器.请帮我实现这个.

问题：

我有一个拦截器：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private injector: Injector, private router: Router) {
  }


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

    const auth = this.injector.get(AuthenticationService);
    const authHeaders = auth.getAuthHeader();
    const authReq = request.clone({headers: authHeaders});

     return next.handle(authReq).do((event: HttpEvent<any>) => {
       if (event instanceof HttpResponse) {

       }
     }, (err: any) => {
       if (err instanceof HttpErrorResponse) {
         if (err.status === 403) {
           this.router.navigate(['login']);
         }
       }
     });
  }
}

它在 Angular 5 中很旧，但现在我已经迁移到 6 并且这不再起作用了。

它说 Observable 类型上不存在属性“do”。

我也试图从这个线程实现解决方案：LINK 没有工作。 …

我正在使用带有刷新令牌的令牌身份验证的应用程序。我已经在Web应用程序的angular v1中成功实现了身份验证和刷新令牌。在使用angular v5的ionic 3应用程序中，我还实现了该过程。它通过刷新令牌成功获取了新令牌。但是问题是，它没有再次调用最后一个请求。

这是我的Http拦截器实现。

@Injectable()
export class HttpsRequestInterceptor implements HttpInterceptor {
isRefreshingToken: boolean = false;
tokenSubject: BehaviorSubject<string> = new BehaviorSubject<string>(null);

constructor(
    private injector : Injector
) {

}

addToken(req: HttpRequest<any>, token: string): HttpRequest<any> {
    return req.clone({ setHeaders: { Authorization: 'Bearer ' + token }})
}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {

    const authenticationService = this.injector.get(AuthenticationService);

    let user : AuthenticatedUser = authenticationService.getUser1();

    console.log("token", (user)? user.token : null);

    let dupReq: HttpRequest<any>;

    if (user …