如何使用 axios 拦截器时修复 config.headers.Authorization "Object is possibly undefined"

Question

我得到了以下代码：

loggedInAxios.interceptors.request.use(
async (config) => {
if (isTokenExpired('access_token')) {
const response = await getRefreshToken();
await refreshAccessToken(response);
}
const accessToken = localStorage.getItem('access_token');
config.headers.Authorization = `Bearer ${accessToken}`;
return config;
},
(error) => error
);

但typescript抱怨config.headers.Authorization对象可能未定义。

我通过添加以下内容找到了一种方法：

if (!config) {
config = {};
}
if (!config.headers) {
config.headers = {};
}

但我不认为这是最好的方法…

Answer 1

您可以使用!(不可为null的断言运算符(告诉TypeScript属性未定义或为null(假设您是100%SURE(，也可以检查它并在它未定义时进行赋值。

示例1:

config.headers!.Authorization = `Bearer ${accessToken}`;

示例2:

config.headers = config.headers ?? {};

示例3:

if(!config.headers) config.headers =  {};

我认为没有其他办法了。

Answer 2

config属于AxiosRequestConfig类型，因此不能定义。

另一方面，config.header确实可以。由于它是一个Record(export type AxiosRequestHeaders = Record<string, string>;(，您实际上可以用一个空对象来默认它：

loggedInAxios.interceptors.request.use(
async (config: AxiosRequestConfig) => {
config.headers = config.headers ?? {};
// Now config.headers can be safely used
config.headers.Authorization = `...`
return config;
},
(error) => error
);