Angular - auth0 AuthHttpInterceptor 未将令牌附加到请求

Age*_*tNo 5 authentication flask auth0 angular

长话短说,我遇到了 auth0 的 AuthHttpInterceptor 类实际上没有将令牌附加到任何传出请求的问题。

我一直在关注本教程系列,以便在简单的 Flask 和 Angular 应用程序中设置 auth0。我遵循 Flask 组件,并设置了一个简单的端点来从数据库中检索一些数据。请注意,@requires_auth装饰器与教程中的装饰器完全相同:

@app.route("/api/v1/members", methods=["GET"])
@requires_auth
def get_all_members():
    # Pagination Logic
    page_num, page_size = 1, 10
    if request.args.get('pn'):
        page_num = int(request.args.get('pn'))
    if request.args.get('ps'):
        page_size = int(request.args.get('ps'))
    page_start = (page_size * (page_num - 1))

    return_data = []
    for member in members.find().skip(page_start).limit(page_size):
        # Convert all IDs into strings
        member = convert_member_ids(member)
        return_data.append(member)
    return make_response(jsonify(return_data), 200)
Run Code Online (Sandbox Code Playgroud)

这不是将受到限制的实际端点,我只是保护此页面以测试身份验证是否有效。

在 Angular 中,这是由检索数据并将其显示在网页上的组件使用的:

export class MembersComponent implements OnInit {

  constructor(private webService: WebService) { }

  ngOnInit() {
    if (sessionStorage['page']) {
      this.page = Number(sessionStorage['page']);
    }
    this.members_list = this.webService.getMembers(this.page);
    // TODO: Fix this with a proper expression
    this.num_pages = 90 / 10;
  }

  members_list: any = [];
  page: number = 1;
  num_pages: number = 0;
}
Run Code Online (Sandbox Code Playgroud)

结果请求被发送到http://localhost:5000/api/v1/members?pn=1

我偏离了指南,而是按照官方 auth0 文档来实现 AuthHttpInterceptor 类的实例,这就是问题开始的地方。我从 app.module.ts 导入和提供的数组如下:

  imports: [
    BrowserModule, HttpClientModule, RouterModule.forRoot(routes), ReactiveFormsModule, AuthModule.forRoot({
      domain: '<my app domain>',
      clientId: '<my client id>',

      // AuthHttpInterceptor
      httpInterceptor: {
        allowedList: [
          {
            uri: 'http://localhost:5000/api/v1/members?pn=1',
            httpMethod: HttpMethod.Get
          }
      ]}
    })
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true
    }, 
    WebService
  ],
Run Code Online (Sandbox Code Playgroud)

理论上,根据文档,这应该使用 auth0AuthHttpInterceptor类来拦截传出请求以将授权标头附加到它们 - 在本例中,仅是成员端点。但事实并非如此。当我尝试访问该页面时,传出请求甚至没有附加标头。这可以在控制台中清楚地看到:

控制台日志显示缺少 auth 标头

由于到目前为止我一直在关注教程和文档 - 我在这里到底做错了什么?我尝试了多种不同的方法,但没有任何解决办法。我见过的大多数其他示例都以类似的方式实现它,所以我很困惑为什么我的代码不起作用。

任何帮助将不胜感激!