如何在POST标头中添加功能

时间:2018-08-11 18:38:42

标签: reactjs post header authorization token

目标正在发送带有包含令牌的Autorization标头的POST请求。

它的功能:

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 {};
    }
}

这是发送到服务器的异步功能:

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

如何在POST的标头中添加authHeader()以正确授权此请求?

1 个答案:

答案 0 :(得分:2)

使用...authHeader()之类的... spread operator。您的authHeader函数返回一个对象{ 'Authorization': 'Bearer ' + user.token }{}。您想要的是将其合并到使用headers键附加的对象上,因此...运算符是此处的正确工具。

所以您的代码将是:

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