小编典典

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

reactjs

在这里反应新手,但精通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身份验证系统运行正常,但是我之前的代码无法正常工作,并且不断出现错误

“ 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);
    });
};

阅读 320

收藏
2020-07-22

共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
const,如果那是另一个文件,我相信就是这样。关于读取方法的一些阅读

2020-07-22