如何将 getAccessToken 与 fetch 函数集成以将数据从 DRF 后端加载到 React 前端？

Question

在这里反应新手，但精通 Django。我有一个简单的 fetch 功能，它运行良好，但我的项目没有涉及登录身份验证。 现在我已经配置了登录系统，我的后端拒绝使用任何访问令牌来处理请求。 我的登录身份验证对我来说很陌生，或多或少是从某个地方复制过来的。 我试图理解它，但无法理解。 我只需要知道如何将我的简单 fetch 函数转换为将 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 身份验证系统运行良好，但我以前的代码不起作用并且我不断收到错误消息

"detail": "未提供身份验证凭据。"

这是我无法与我以前的获取功能“结合”的访问令牌：

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

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

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 const，如果将其放在另一个文件中，我相信就是这样。 关于 Fetch 方法的一些阅读