How to add Function in POST Headers - reactjs

Question

The target is sending a POST request with Autorization header contains token.
It's function:
export function authHeader() {
// return authorization header with jwt token
let user = JSON.parse(localStorage.getItem('user'));
if (user && user.token) {
return { 'Authorization': 'Bearer ' + user.token };
} else {
return {};
}
}
Here is async function send to server:
export async function submitToServer(values){
try{
let response = await fetch('http://localhost:50647/fund/submitfund', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type' : 'application/json',
authHeader()
},
body: JSON.stringify(values),
});
let responseJson = await response.json();
return responseJson;
} catch (error) {
console.error(error);
}
}
How can I add authHeader() to headers in POST to correctly authorize this request?

Answer 1

Use ... spread operator like, ...authHeader(). Your authHeader function returns an object { 'Authorization': 'Bearer ' + user.token } or {}. What you want is to merge it to the object you attached with the headers key, so ... operator is the correct tool here.
So your code will be:
export async function submitToServer(values) {
try {
let response = await fetch('http://localhost:50647/fund/submitfund', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
...authHeader()
},
body: JSON.stringify(values),
});
let responseJson = await response.json();
return responseJson;
} catch (error) {
console.error(error);
}
}