javascript - 如何将axios标头中的数据获取到Vue中的组件
问题描述
我有一个 axios apiClient
,我正在尝试将电子邮件存储localStorage
到标题中。在我的组件中,我尝试使用
response.headers['email']
并将其分配给电子邮件变量,但我没有定义。我收到了电子邮件,localStorage
但无法在组件中收到它。任何帮助将不胜感激。
爱讯
const apiClient = axios.create({
baseURL: `${API}`,
withCredentials: false,
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
});
apiClient.interceptors.request.use(function (config) {
let token = JSON.parse(localStorage.getItem('token'));
let email = JSON.parse(localStorage.getItem('email'));
if (token) {
config.headers.Authorization = `Bearer ${token}`;
config.headers.email = `${email}`;
}
return config;
}, function (err) {
return Promise.reject(err);
});
这是我需要电子邮件数据的组件中的方法
methods: {
getOrders(){
service.getAllOrders()
.then(response => {
this.email = response.headers['email'];
console.log("email:", this.email)
})
}
}
getAllOrders()
做 axios get
。
解决方案
您设置了请求拦截器,但您正在检查响应标头,这是两个不同的对象。响应来自服务器,不受请求拦截器的影响。
您可以为响应创建不同的拦截器:
apiClient.interceptors.response.use((response) => {
response.headers.email = JSON.parse(localStorage.getItem('email'));
return response;
});
推荐阅读
- android - 这是附加到视图的内存泄漏吗?
- java - 千位精灵绘制性能不佳
- c# - 将应用程序身份验证升级到 Core 2.0+
- android - React Native:指定的孩子已经有一个父母
- node.js - 带有过滤器嵌入文档 NoseJS 的 Mongodb 聚合
- c++ - QDir mkpath 返回 true,但未创建目录
- python - 将训练数据(文本、melspectrogram、频谱图、标签(.wav)文件)添加到 Tensorflow 2.0
- android - Firebase:未知状态代码:12500 android oauth2
- r - 增加图例中边框的线宽
- r - R shiny 中是否有一个 R 函数来绘制词干和显示汇总表