axios设置请求头ts类型检测报错的问题

axios设置请求头ts类型检测报错

在写项目的时候给请求拦截头加登录验证的时候遇到的，发现在axios1.1.3的版本之后，ts中，添加请求的通过 . 的时候，类型检测会报错

Authorization这个属于自定义的属性，ts不认，vue可以，相当于对象的创建与赋值

解决办法 1:

将axios 的版本降到1.1.3的版本，但是在工作中，肯定是用的最新版本,（不是最优解）
你需要先卸载axios现在的版本,使用命令,这里楼主使用的是yarn,各位大大可以使用其他的
yarn remove 你要卸载的依赖包
安装:yarn add axios@1.1.3

在这里，作者我用的是axios1.2.2的版本，是已经不能使用 **.**点语法来新增请求头了。

**办法2（最优解） :

**用axios 里面提供的config.headers.set方法来解决，set可以设置请求头的成员，就是自定义请求头成员
但是不止只设置 config.headers.set(“Authorization”, Bearer ${token}, false)这一句，ts会报错，因为set方法的类型太多了，ts没有办法识别,、
办法2的解决办法：
在上图中,先进行类型判断 if (typeof config.headers.set === ‘function’) {
config.headers.set(“Authorization”, Bearer ${token}, false)
}
可以简洁版 : typeof config.headers.set === ‘function’ && config.headers.set(“Authorization”, Bearer ${token}, false) 这是利用的逻辑中断

办法三(不推荐):

继承接口 AxiosRequestConfig的类型
ts不推荐使用any关键字，因为any就是为了逃避ts类型检测
interface RequestConig extends AxiosRequestConfig{
headers:any
}
instance.interceptors.request.use(
(config:RequestConig) => {
const store = useUserStore()
const token = store.userInfo?.token
if (token && config.headers) {
config.headers.Authorization = Bearer ${token}
}
}
return config
},
(err) => {
return Promise.reject(err)
}
)
以上就是楼主我遇到的一个ts的问题，如果有其他的建议，希望各位大大，多在评论区讨论或者私聊作者!