Question

我的目标：

我正在尝试通过JWT来实现授权，方法是在头中发送jwt令牌以及前端发送的每个请求。而且我为此添加了一个拦截器。

问题

问题是前端始终发送两次请求：第一个请求的标头中没有authorization : Beared .... ，而第二个请求的标头中没有2020-07-02 18:07:43 INFO JwtRequestFilter:45 - ============== Trying to access request URL : /myaApp/rest/dummy-url 2020-07-02 18:07:43 INFO JwtRequestFilter:47 - ============== Request Token Header : null 2020-07-02 18:07:46 INFO JwtRequestFilter:45 - ============== Trying to access request URL : /myaApp/rest/dummy-url 2020-07-02 18:07:46 INFO JwtRequestFilter:47 - ============== Request Token Header : Bearer Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ6YWlyaSIsImV4cCI6MTU5MzcxMzA3MywiaWF0IjoxNTkzNzA5NDczLCJqdGkiOiIzIn0.BmNQlK8jFmDmYKeX6JSOu7HJfLwaA4ngvE09deKdOvZ1SpOScgGikJHnV27AaQNFyaJLwsxzhMxvZaXPC73jJQ。发送请求后的后端日志：

import { Observable } from 'rxjs';
import {tap} from 'rxjs/internal/operators';
import { DataService } from './../sharedServices/data.service';
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse, HttpErrorResponse } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class JwtInterceptorService implements HttpInterceptor{
  constructor(private dataService : DataService) { }
  intercept(request : HttpRequest<any>, next:HttpHandler) : Observable<HttpEvent<any>>{
  let jwtToken = this.dataService.getJwtToken();

   let clonedReq = this.addToken(request, jwtToken);

   return next.handle(clonedReq).pipe(
   tap((event: HttpEvent<any>) => {
     console.log(event);
   }),
   tap((err: any) => {
      console.log(err);
   })
  );

 private addToken(request:HttpRequest<any>, jwtToken){
   if(jwtToken){
     let clone : HttpRequest<any>;
     clone = request.clone({
       setHeaders : {
         'Authorization': `Bearer ${jwtToken}`
       }
     });
     return clone;
   }
   return request;
 }
}

作为旁注：删除拦截器时，只有一个请求发送到后端。

到目前为止我尝试过的事情

经过研究，我发现问题可能与两次订阅有关：在拦截器和获取数据的http服务中，所以我使用了管道。

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
@NgModule({
...
 providers: [
             ...
             { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptorService, multi: true }
            ]
 ....
})

App.module

using touch src/app/interceptors/jwt-token.interceptor.ts

但这并不能解决问题。

PS：可能的原因：我不确定，但是我使用ng g服务创建了拦截器，因为我无法使用当前的角度版本生成提供程序。另外，要在Ionic 4中创建拦截器，还必须使用官方文档中所述的服务。

编辑1： 我确实手动创建了拦截器public testHeader() { let headers: HttpHeaders = new HttpHeaders(); headers = headers.append('Authorization', "a test token.."); return this.http.get("http:localhost//myapp/rest/", {headers}); }，但问题仍然存在。

编辑2： 即使我完全删除了拦截器，并将标头手动添加到我的GET请求中，我仍然在后面收到2个请求。

type MessageListener = (event: MessageEvent) => void;
type CloseListener = (event: CloseEvent) => void;
type ErrorListener = (event: Event) => void;
type OpenListener = (event: Event) => void;
type OpeningListener = () => void;

export enum ListenerType {
  Message = 'message',
  Close = 'close',
  Open = 'open',
  Error = 'error',
  Opening = 'opening',
}

export interface Listeners {
  [ListenerType.Message]: MessageListener[];
  [ListenerType.Close]: CloseListener[];
  [ListenerType.Open]: OpenListener[];
  [ListenerType.Error]: ErrorListener[];
  [ListenerType.Opening]: OpeningListener[];
}

离子/角度拦截器发送重复的HTTP请求

0 个答案: