Angular - OpenApi CodeGen - How to add Header in a api request?

Viewed 1481

I'm working with Angular 10. I'm using openapi codegen (auto-generated) services.

Issue: I want to pass Authorization: Token 123456 in my header but can't seem to get my head around how and where exactly to add the interceptor.

My Component File is:

 constructor(        
    private meApi : MeService
    )


 meDetails;
  meCheck(){
      this.meApi.meRead().subscribe(
        (data: any) => {
          this.meDetails= data;
        },
        (err) => { console.error(err); },
        () => { }
      )
    }

Upon running this function in ngOnInIt. I get the following error:

401 (Unauthorized)

Because obviously, the authorization token is not passed with the API.

meRead() function from the auto generated service file has the following relevant code:

 /**
     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
     * @param reportProgress flag to report request and response progress.
     */
    public meRead(observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<User>;
    public meRead(observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<HttpResponse<User>>;
    public meRead(observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<HttpEvent<User>>;
    public meRead(observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json'}): Observable<any> {

        let headers = this.defaultHeaders;

        // authentication (DRF Token) required
        if (this.configuration.apiKeys) {
            const key: string | undefined = this.configuration.apiKeys["DRF Token"] || this.configuration.apiKeys["Authorization"];
            if (key) {
                headers = headers.set('Authorization', key);
            }
        }

        let httpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
        if (httpHeaderAcceptSelected === undefined) {
            // to determine the Accept header
            const httpHeaderAccepts: string[] = [
                'application/json'
            ];
            httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
        }
        if (httpHeaderAcceptSelected !== undefined) {
            headers = headers.set('Accept', httpHeaderAcceptSelected);
        }

How can I pass the Authorization: Token 12345 in the headers of this request?

Summary: How to pass Authorization header in openapi codegen service file?

Will really appreciate if you could give a detailed answer. Thank You.

1 Answers

You can pass headers by altering the defaultHeaders property of the generated client, or also by providing some configuration in the ad-hoc property. See this blog post for some other options.

/**
 * OpenAPI definition [...]
 */
import { ...}


@Injectable({
  providedIn: 'root'
})
export class UserControllerService {

    protected basePath = 'http://localhost:8081';
    public defaultHeaders = new HttpHeaders(); // <- here
    public configuration = new Configuration(); // <- or there
    public encoder: HttpParameterCodec;
    
    {...}
}

As for passing something useful through the {httpHeaders: '/'} of the method call, didn't understood how to do it.

Related