reactjs - 如何正确设置 axios 默认标头
问题描述
我在我的项目中使用 reactjs,但我有一个问题,在我设置全局 axios 配置的 config.js 文件中,我正在为 axios 请求设置默认标头,但是当我发出 axios 请求时,它不会在请求中发送这些标头.
配置.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'URL/api'
});
export const setAuthToken = (token) => {
if (token) {
// Apply to every request
instance.defaults.headers.common['Authorization'] = 'Bearer ' + token;
} else {
// Delete auth header
delete instance.defaults.headers.common['Authorization'];
}
};
export default instance;
登录.js
import axios from '../../../config';
import { setAuthToken } from '../../../config';
axios
.post('/auth/signin', {
username: email,
password: password
})
.then((res) => {
setCurrentUser(res.data);
setAuthToken(res.data.accessToken);
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
setError(true);
});
解决方案
您可以为此任务使用 axios拦截器。
1-)在成功登录的内部,将检索到的令牌放入localStorage。删除 setAuthToken 行。
.then((res) => {
setCurrentUser(res.data);
localStorage.setItem("token", res.data.accessToken);
setLoading(false);
})
2-) 将此拦截器添加到您的 axios 实例。
const instance = axios.create({
baseURL: 'URL/api'
});
instance.interceptors.request.use(
function(config) {
const token = localStorage.getItem("token");
if (token) {
config.headers["Authorization"] = 'Bearer ' + token;
}
return config;
},
function(error) {
return Promise.reject(error);
}
);
推荐阅读
- bash - 使用 Bash 脚本自动将 360° 3D 元数据注入视频
- javascript - 误解localStorage的概念
- c# - 未找到 UWP 资源
- node.js - 在 DynamoDB 中,您可以 UpdateItem 忽略未定义的值吗?
- javascript - jQuery幻灯片出现和消失在同一个按钮点击
- python - Python 的 os.fstat 在每个平台上都可用吗?
- python - 输出显示类似 Series([], ),如何解决这个问题?
- python - 如何使用 QWebEngineView 刷新一个 QApplication 与一个计划周期
- python - 具有所有相关对象的重复模型实例
- javascript - 如何以更好的方式编写它,例如 lodash