身份验证拦截器在 angular 6 中不起作用

Question

我正在尝试将 Azure B2C 实施到我的 Angular 6 应用程序中：

authentication-interceptor.ts:

@Injectable()
export class AuthenticationInterceptor implements HttpInterceptor {
    constructor(private adalService: AdalService) { }

    intercept(req: HttpRequest<any>, next:HttpHandler): Observable<HttpEvent<any>>{
        const authHeader = this.adalService.userInfo.token;
        var header = 'Bearer ' + authHeader;
        const authReq = req.clone({headers: req.headers.set('Authorization', header)});
        return next.handle(authReq);
    }
}

api-service.ts:

getMenuItemsDistinct():Observable<string[]>{
   var url = `${environment.apiUrl}/api/menuitemsdistinct`;
   return  this.httpClient.get<string[]>(url);    
}

module.ts:

 providers: [
    AdalService, 
      AuthenticationGuard,
      { provide: HTTP_INTERCEPTORS, useClass: AuthenticationInterceptor, multi: true }
]

提琴手：

我希望 fiddler 中的请求会显示不记名令牌（我不确定）？奇怪的是，当我调试应用程序时，在 AuthenticationInterceptor 拦截方法中遇到了一个断点，但正如您在 fiddler 中看到的那样，我没有看到令牌，之后我得到了 401。关于如何解决此问题的任何建议，或者我可能在这里遗漏了一些步骤？我在调试时在代码中有一个很好的标记。

正如 hugo 所述，google crome 工具显示了承载。不确定为什么 fiddler dosen:

Answer 1

我相信您可能只是遇到了 fiddler 或 fiddler 配置方面的问题。请尝试在 chrome 开发工具上检查相同的请求 headers。构建请求的方式没有任何问题。这是根据文档。

您可能还遇到了 headers 在初始 OPTIONS 请求时从服务器返回的问题，这将转化为执行实际请求时出现问题。它可能与您的 CORS 配置不匹配。

从添加的屏幕截图中，错误 audience is invalid 通常意味着您可能正在尝试访问不应该访问的资源。可能是一些天蓝色的配置或数据访问规则。

身份验证拦截器在 angular 6 中不起作用

Authentication Interceptor not working in angular 6

adal.js

angular