如何在角度4中添加自定义拦截器

Question

I have written a custom interceptor on angular 4. The issue I am having is checking URL with dynamic path variable in the URL. The backend application has Oauth2 and it's deployed in a separate server(Authorization and Resource). The interceptor class of the angular is below

export class TokenInterceptor implements HttpInterceptor {
    private whiteList = [
        'http://localhost:8081/Test1app/oauth-server/oauth/token',
        'http://localhost:8080/ResourceApp/oauth-resource/ibex/api/signup',
        'http://localhost:8080/ResourceApp/oauth-resource/ibex/api/registeration/confirm/**',
        'http://localhost:8080/ResourceApp/oauth-resource/ibex/api/user/profile/upload',
        'http://localhost:8080/ResourceApp/oauth-resource/ibex/api/profile/edit/password/**'
    ]
    constructor(public auth : AuthenticationService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log(request.url);
        // If request is not in whitlist add header
        if (!this.whiteList.includes(request.url)) {
            console.log("I was not here");
            console.log(request.url);
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${this.auth.getToken()}`
                }
            });
        }

        return next.handle(request);
    }

}

the issue that I am facing now is whenever I try to access http://localhost:8080/ResourceApp/oauth-resource/ibex/api/profile/edit/password/12345-2333-4444 it's going under the if condition (request is in the whitelist)

Answer 1

Try this:

export class TokenInterceptor implements HttpInterceptor {
  private patterns = [
    new RegExp('http://localhost:8081/Test1app/oauth-server/oauth/token'),
    new RegExp('http://localhost:8080/ResourceApp/oauth-resource/ibex/api/signup'),
    new RegExp('http://localhost:8080/ResourceApp/oauth-resource/ibex/api/registeration/confirm/.*'),
    new RegExp('http://localhost:8080/ResourceApp/oauth-resource/ibex/api/user/profile/upload'),
    new RegExp('http://localhost:8080/ResourceApp/oauth-resource/ibex/api/profile/edit/password/.*')
  ];

  constructor(public auth : AuthenticationService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this.match(request.url)) {
      request = request.clone({ setHeaders: { Authorization: `Bearer ${this.auth.getToken()}` } });
    }

    return next.handle(request);
  }

  match(url: string): boolean {
    for (const pattern of this.patterns) {
      if (Array.isArray(url.match(pattern))) { return true; }
    }

    return false;
  }

}

References:

String.prototype.match()

Regular Expressions