Msal Angular 本地主机的 HTTP 拦截器未附加令牌

Question

我正在尝试调用本地主机 API 并将不记名令牌附加到 header。它应该由 msal-angular 自动完成。现在，我已将 localhost API 路由添加到 protectedResourceMap，但 header 中没有持有者令牌。尝试添加 jsonplaceholder 和 graph.microsoft 以对其进行 HTTP post 调用并且它有效。唯一的问题是当我尝试对本地主机 API.

进行 HTTP 调用时

我正在使用：

@azure/msal-browser@2.12.0
@azure/msal-angular@2.0.0-beta.0

我在 app.module.ts.

中为拦截器使用了工厂提供程序

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
   protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', [
     'user.read',
   ]);

  protectedResourceMap.set('http://localhost:5000/api/add', [
    'api://custom api consent'
  ]);

   protectedResourceMap.set('https://jsonplaceholder.typicode.com/', [
     'api://custom api consent'
   ]);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap,
  };
}

也注册在app.module.ts

    providers: [
        {
          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,
        Msal,
        BroadcastService,
  ],

有什么建议吗？

Answer 1

为了防止其他人遇到此类问题，我找到了解决方案。我发现 protectedResourceMap 的工作更加动态，相对 url 将工作。问题是由于添加了完整路由，例如 http://localhost:4200/api/add 等

解决方案就是添加 /api/

protectedResourceMap.set('/api/', [
    'api://custom api consent'
  ]);

Msal Angular 本地主机的 HTTP 拦截器未附加令牌

Msal Angular HTTP interceptor for localhost not attaching token

angular-http-interceptors

angular

angular-token

msal-angular