ReactJS 从 API fetch 中获取令牌字符串

Posted 2023-03-10

【中文标题】ReactJS 从 API fetch 中获取令牌字符串

【英文标题】：ReactJS get token string from API fetch

【发布时间】：2018-06-05 21:59:49

【问题描述】：

我用 Java 设置了一个 API。但现在我正在用 ReactJS 开发一个客户端。身份验证使用 JWT 令牌。使用 Postman，当我向身份验证 URL 发送 POST 请求时，它会返回一个 JWT 令牌，如下所示：

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZHVzZXIiOjEsImlzcyI6ImF1dGgwIn0.0BXAQl-yMIDeAU6Emppo6LBIm1RAdLa9vDWbQkdLs1o

这正是我想要的。但我不知道如何在 ReactJS 中调用 fetch 后检索字符串。

我尝试使用承诺并写了这个：

.then((data) => 
    data.text().then((token) => 
        alert(token)
    )
)

但它什么也没给我，我有一个没有文字的警报。 如何从 fetch 返回的 Object Response 中获取 String？

【问题讨论】：

为什么不进行另一个 fetch 调用

因为它已经返回了我想要的我的想法，但我不知道如何将其作为字符串获取

data 的值是多少？

Response type: "cors", url: "http://localhost:8080/projet_p52/Signin/apiSignin/signin", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, bodyUsed: false

该令牌可能存储在data.headers.Authorization 或其他一些标头字段中。在您的 then() 方法回调中添加 console.log(data.headers); 并查看值。

【参考方案1】：

也许你的后端服务器返回Content-Type=application/json？而是使用text() 方法尝试使用json()。

试试这个：

fetch('/next/page')
  .then(function(response) 
    return response.text();
  )
  .then(function(text)  
    // <!DOCTYPE ....
    console.log(text); 
  );

【讨论】：

没有我的服务器产生纯文本

【参考方案2】：

我遇到了同样的问题，并且能够通过以下方式获得令牌：

.then(res => res.json()).then(res => 
    let token = res.token;
    console.log("token: ", token);
);

来源： https://developer.mozilla.org/en-US/docs/Web/API/Body

【参考方案3】：

该响应对象上的 text() 方法就是您要查找的内容。

使用await 语法我认为比使用then() 简单一点，使用await，this.setState() 中的this 的作用域符合预期。

async getStrResponse() 
  const response = await fetch('myController/GetStringTest');
  const stringResponse = await response.text();
  this.setState( someStr: stringResponse, loading: false );