如何将getAccessToken与fetch函数集成，将数据从DRF后端加载到React Frontend?

Question

在这里反应新手，但精通Django.我有一个简单的获取功能，它运行良好，但后来我的项目不涉及登录身份验证。现在我已经配置了登录系统，我的后端拒绝使用任何访问令牌处理请求。我的登录身份验证对我来说是很新的，或多或少是从某个地方复制的。我试图理解它，但无法理解。我只需要知道如何转换我的简单获取函数以在其标头中的请求中包含 getAccessToken，以便我的后端为该请求提供服务。

这是我以前工作的简单获取函数：

class all_orders extends Component {
state = {
todos: []
};
async componentDidMount() {
try {
const res = await fetch('http://127.0.0.1:8000/api/allorders/'); // fetching the data from api, before the page loaded
const todos = await res.json();
console.log(todos);
this.setState({
todos
});
} catch (e) {
console.log(e);
}
}

我的新登录 JWT 身份验证系统运行良好，但我以前的代码不起作用，并且不断收到错误

"详细信息"："未提供身份验证凭据。

这是我无法与我以前的获取函数"组合"的访问令牌：

const getAccessToken = () => {
return new Promise(async (resolve, reject) => {
const data = reactLocalStorage.getObject(API_TOKENS);
if (!data)
return resolve('No User found');
let access_token = '';
const expires = new Date(data.expires * 1000);
const currentTime = new Date();
if (expires > currentTime) {
access_token = data.tokens.access;
} else {
try {
const new_token = await loadOpenUrl(REFRESH_ACCESS_TOKEN, {
method: 'post',
data: {
refresh: data.tokens.refresh,
}
});
access_token = new_token.access;
const expires = new_token.expires;
reactLocalStorage.setObject(API_TOKENS, {
tokens: {
...data.tokens,
access: access_token
},
expires: expires
});
} catch (e) {
try {
if (e.data.code === "token_not_valid")
signINAgainNotification();
else
errorGettingUserInfoNotification();
} catch (e) {
// pass
}
return reject('Error refreshing token', e);
}
}
return resolve(access_token);
});
};

Answer 1

如果您正在寻找一种如何在获取请求中传递标头的方法，那非常简单：

await fetch('http://127.0.0.1:8000/api/allorders/', {
headers: {
// your headers there as pair key-value, matching what your API is expecting, for example:
'details': getAccessToken()
}
})

只是不要忘记导入您的getAccessToken常量，如果这是另一个文件，我相信就是这样。一些关于获取方法的阅读