Question

我正在尝试在我的Angular 6应用中实现Azure B2C：

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 }
]

提琴手：

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

如雨果所言，谷歌crome工具显示了载体。不确定为什么提琴手要调皮：

Answer 1

我相信您可能只是对Fiddler或Fiddler配置有问题。请尝试并在chrome开发工具上检查相同的请求标头。建立请求的方式没有错。根据文档。

您可能还遇到问题，在初始node --max-old-space-size=8192 .\app.js请求中从服务器返回的标头会转化为在执行实际请求时出现问题。您的CORS配置可能不匹配。

在添加的屏幕截图中，错误OPTIONS通常表示您可能正在尝试访问不应使用的资源。可能是一些天蓝色的配置或数据访问规则。

身份验证拦截器无法在角度6中工作

1 个答案: