I want to use an Axios Interceptor to add a bearer token to each request. Best Practices?

[Mortuie]

Hi All,

Currently looking at writing some code like this:

  const customInterceptor = instance.interceptors.request.use((cfg) => {
      // @ts-ignore
      cfg.headers.Authorization = `Bearer ${jwt}`;
      return cfg;
    });

But I can't get it to work without the // @ts-ignore which i'd obviously want to avoid if possible.
Does anyone have any other better ways of doing this or is this the best work around currently ?

[aniravi24]

Try using bracket notation, like the following

cfg["headers"] = cfg.headers ?? {};
cfg.headers["Authorization"] = `Bearer ${jwt}`;

Since the types suggest cfg.headers might be undefined, you just have to guarantee it exists by setting a fallback (the ?? {} part) before setting the Authorization header and it should work without the ts-ignore.

[doronhorwitz]

Try using bracket notation, like the following

cfg["headers"] = cfg.headers ?? {};
cfg.headers["Authorization"] = `Bearer ${jwt}`;

Since the types suggest cfg.headers might be undefined, you just have to guarantee it exists by setting a fallback (the ?? {} part) before setting the Authorization header and it should work without the ts-ignore.

@aniravi24, your code above results in the following TS error in Axios v1.2.2.

error TS7053: Element implicitly has an 'any' type because expression of type '"Authorization"' can't be used to index type 
'AxiosHeaders | Partial<RawAxiosHeaders & MethodsHeaders & CommonHeaders>'.
Property 'Authorization' does not exist on type 'AxiosHeaders | Partial<RawAxiosHeaders & MethodsHeaders &
CommonHeaders>

I'm trying to upgrade from Axios v1.1.3 to v1.2.2 and it seems that there was some sort of breaking change in AxiosHeader at some point that results in the above code not working in TS.

[aniravi24]

Looks like it's a known issue, it breaks my code too. The comments on these issues may be helpful to you.

#5416
#5415

There are also some open PRs for it, but not sure when those will go in.

[doronhorwitz]

oh great! Thanks
Based on ideas from #5416, the workaround I figured out to use in the meantime till the relevant PRs are merged in, is:

import { RawAxiosRequestHeaders } from 'axios';
cfg["headers"] = cfg.headers ?? {};
(cfg.headers as RawAxiosRequestHeaders)["Authorization"] = `Bearer ${jwt}`;

[nolenfelten]

This is unrelated and very random circumstance i came across this, but, oh my god! thank you!