使用不记名令牌响应 API 调用答案

【问题标题】：React API call with bearer token使用不记名令牌响应 API 调用
【发布时间】：2020-12-03 00:51:30
【问题描述】：

我是编码和反应的新手。我正在尝试进行 API 调用以获取数据。问题是给我的不记名令牌每 24 小时过期一次，我不知道如何将令牌代码作为变量插入到我的请求中的标头授权中，以使其在需要时更新并交付给我 JSON信息。

【问题讨论】：

在这里发帖时请不要大喊大叫。全部大写的文本更难阅读和理解，并且不会更快地为您提供帮助。当您寻求免费帮助时，来到这里对我们大喊大叫也是相当不礼貌的。如果您花一些时间在tour 和阅读help center 页面以了解该网站的工作原理，然后再开始发布，您会发现您在这里的体验会好很多。
您有可以为我们提供的示例代码吗？

【解决方案1】：

这样的事情可能会奏效

import React from 'react';
const App = () => {
  const token = "yourtokenhere";
  const [result, setResult] = React.useState();
  React.useEffect(()=>{
    fetch('https://example.test/', {
      method: "POST",
      headers: {"Authorization": `Bearer ${token}`}
    }).then(res => res.json()).then(json => setResult(json));
  },[]);

  return (
    <>
      {JSON.stringify(result)}
    </>
  );
};

【讨论】：

【解决方案2】：

对于授权标头，我建议interceptor。

拦截器可以执行诸如URL操作、日志记录、向标头添加令牌等任务之前和之后 strong> 发出 API 请求和响应。

供 fetch() API 使用，npm install fetch-intercept --save

import fetchIntercept from 'fetch-intercept';
 
const registerIntercept = fetchIntercept.register({
    request: function (url, config) {
        // Modify the url or config here
        const authHeader = new Headers(config.headers);
        authHeader.append('Authorization', 'Bearer 232Qefsg4fg4g'); // your token
        config.headers = authHeader;
        return [url, config];
    },
 
    requestError: function (error) {
        // Called when an error occured during another 'request' interceptor call
        return Promise.reject(error);
    },
 
    response: function (response) {
        // Modify or log the reponse object
        console.log(response);
        return response;
    },
 
    responseError: function (error) {
        // Handle a fetch error
        return Promise.reject(error);
    }
});

Axios 使用，npm install axios

axios.interceptors.request.use(req => {
  // `req` is the Axios request config, so you can modify
  // the `headers`.
  req.headers.authorization = 'my secret token';
  return req;
});

【讨论】：