使用承载令牌响应API调用

Question

我对代码和反应很陌生。我正在尝试进行API调用以获取数据。问题是，给我的承载令牌每24小时过期一次，我不知道如何在请求中将令牌代码作为变量插入到我的头部授权中，以在需要时进行更新并向我传递JSON信息。

Answer 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)}
</>
);
};

Answer 2

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

拦截器可以执行URL操作、日志记录、向标头添加令牌等任务在之前和发出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;
});