Question

您知道如何使用HttpInterceptor提交表单吗？我的GET方法使用拦截器获取令牌并带来结果等是可以的...但是当我尝试提交表单时，什么都没发生，后端没有被调用。

TokenInterceptor.ts

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(private kcService: KeycloakService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
    return from(this.kcService.init())
      .pipe(switchMap(authToken => {
        debugger;
        if(authToken){
          const headers = request.headers
            .set('Authorization', 'Bearer ' + authToken)
            .append('Content-Type', 'application/json');
          console.log(authToken);
          const reqClone = request.clone({
            headers
          });
          return next.handle(reqClone);
        }
      }));
  }

}

ItemService.ts

@Injectable()
export class ItemService {

    itensUrl = 'http://localhost:8080/itens'

    constructor(private http: HttpClient, private kcService: KeycloakService) { }

    list(){
     return this.http.get<any[]>(this.itensUrl);
    }

    addiction(item: any){
      return this.http.post(this.itensUrl, item);
    }
  }

app.modules.ts：

 providers: [
    ItemService,
    KeycloakService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }

ItemPatrimonyComponent.ts

export class ItemPatrimonyComponent implements OnInit {

  itens = [];

  constructor(private itemService: ItemService) { }

  ngOnInit() {
    this.listAll();
  }

  listAll(){
    this.itemService.list().subscribe(data => this.itens = data)
    console.log(this.itens);
  }

  add(frm:FormControl){
    this.itemService.addiction(frm.value)
      .subscribe(() => {
        frm.reset();
        this.listAll();
       });
  }

Answer 1

问题出在Keycloak初始化函数上，您无法调试问题，因为在拦截器上，您正在将调试器添加到init的回调内部而不是外部。如果调用init并刷新页面（keycloak会做什么），您将永远不会看到回调调试器起作用，您需要在keycloak服务上进行操作，而不是直接调用init来验证令牌是否已经定义（如果返回令牌）每个请求调用keycloak.init。像这样：

if (this.keycloak.token) {
  return Promise.resolve(this.keycloak.token);
}
return this.keycloak.init().then(()=> this.keycloak.token)

如何使用Http Interceptor提交Angular表单

1 个答案: