如何在Angular中基于Request Uri在自定义拦截器和Msal拦截器之间使用条件拦截器答案

【问题标题】：How to use conditional interceptor between custom Interceptor and Msal Interceptor based on Request Uri in Angular如何在Angular中基于Request Uri在自定义拦截器和Msal拦截器之间使用条件拦截器
【发布时间】：2021-04-21 07:00:05
【问题描述】：

我在我的 angular 11 项目中实现了 @azure/msal-angular 2.0。我在这个项目中使用了 2 个 API。很少有 API 需要自定义拦截器 (AuthInterceptor)，很少需要 msal.js 的 MsalInterceptor。两种 API 一次只能使用一个拦截器，否则请求失败。我想知道如何在单个拦截器中自定义 MsalInterceptor 和 CustomInterceptor。

这是我的 app.module.ts 文件（这里要么我想删除 msalinterceptor 并在 AuthInterceptor 中自定义它，要么我想保留两个拦截器并根据请求 URI 有条件地使用它）

  providers: [
{
  provide: HTTP_INTERCEPTORS,
  useClass: AuthInterceptor,
  multi: true
},
{
  provide: HTTP_INTERCEPTORS,
  useClass: MsalInterceptor,
  multi: true
},  
{
  provide: MSAL_INSTANCE,
  useFactory: MSALInstanceFactory
},
{
  provide: MSAL_GUARD_CONFIG,
  useFactory: MSALGuardConfigFactory
},
{
  provide: MSAL_INTERCEPTOR_CONFIG,
  useFactory: MSALInterceptorConfigFactory
},
MsalService,
MsalGuard,
MsalBroadcastService

这就是我尝试通过在此文件中使用 MsalInterceptor 来自定义 AuthInterceptor 的方式。

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {      
    if (req.url.indexOf(this.APIOne) !== -1) {

      // I want to use USE MSALInterceptor Here. but it is not working.

              const scopesInformation = {
                        scopes: [
                             'mail.send'
                        ],
                     };
                       
                    this.auth.instance.acquireTokenSilent(scopesInformation).then(tokenResponse => {
                             debugger;
                             req = req.clone({
                                 setHeaders: { Authorization: 'Bearer ' + tokenResponse.accessToken }
                            });
                         });
                     
    } else
        if (req.url.indexOf(this.APITwo) !== -1) {
          // This is my custom interceptor which does not require MsalInterceptor Token.
            this.token = localStorage.getItem('APITwoToken');
            const authReq = req.clone({
                headers: new HttpHeaders({ 
                   'Cache-Control': 'no-cache, no-store, must-revalidate, post-check=0, pre-check=0',
                    'Pragma': 'no-cache',
                    'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
                }), setHeaders: { Authorization: 'Bearer ' + this.token }
            })
            req = authReq;
        }

    return next.handle(req).pipe(
        tap(
            event => this.handleResponse(req, event),
            error => this.handleError(req, error)
        )
    );
}

感谢任何帮助。提前致谢。

【问题讨论】：

标签： angular interceptor msal

【解决方案1】：

想出了一个临时解决方案。刚刚将 MSALInterceptor 移到 AuthInterceptor 上方。不知道这是否是一个好的解决方案，但不知何故这有效。

{
  provide: HTTP_INTERCEPTORS,
  useClass: MsalInterceptor,
  multi: true
},
{
  provide: HTTP_INTERCEPTORS,
  useClass: AuthInterceptor,
  multi: true
},

【讨论】：

为什么不使用stackoverflow.com/questions/55522320/…之类的？在标题中指出您需要哪种“拦截器”（实际上，您是一个独特的拦截器，检查“标题”是否具有属性）
这是一个非常好的答案，这可能是我正在寻找的答案，非常感谢@Eliseo