Javascript React JS错误通过会话存储传递用户令牌时json意外结束

我有一个登录页面，除了用户名和密码。提交按钮后，页面通过json/api处理用户凭证，并生成令牌，从而将用户路由到一个平台，该平台向客户机显示其各自信息的下拉列表

我的登录页面正在从API获取用户令牌（通过console.log确认），但我遇到的问题是如何将令牌从登录页面传递到登录页面

现在，当我手动将生成的令牌粘贴到登录页时，下拉列表显示用户的数据，因此问题是如何将生成的令牌传递到登录页

首先，在登录页面中，我有一个从API检索客户端令牌的函数。我在按钮提交时调用此函数：

componentDidMount() {  
    this.fetchData(); 
} 

//request the token
fetchData() {
    return fetch('http://myapiauth:11111/api/auth', {
        method: 'POST',
        headers: {
            'Content-type': 'application/json',
        },
         body: JSON.stringify({
            username: 'myadminName',
            password: 'myPassword',
            Authorization: 'myPassword',
        })
    }) /*end fetch */
    .then(results => results.json())
    .then(data => {
        this.setState({ data: data })
        sessionStorage.setItem('token', JSON.stringify(data))
      })
    }

  //authenticate request
  requestUserInfo() {
    var token = JSON.parse(sessionStorage.getItem('token'));
    return fetch('http://myapiauth:11111/api/auth', {
      method: 'GET',
      headers: new Headers({
        Authorization: 'Bearer ' +sessionStorage.token
      }),
    })
      .then((response) => response.json());
  }

登录完整代码：

…对于登录页，在下面的代码段中，我正在从登录页检索令牌：

componentDidMount() {
    fetch('http://myapiclients:22222/api/clients', {
        method: 'GET',
        headers: {
            'Content-type': 'application/json',
            'Authorization': 'Bearer ' +sessionStorage.token
        },
    })
    .then(results => results.json())
    .then(data => this.setState({ data: data }))
}

登录页完整代码：

---

关于我做错了什么，我能得到一些帮助吗？我已经检查了我的语法/设置，并与其他在线资源进行了比较，但仍然无法找出问题所在

您需要将数据字符串化为

会话存储

。否则它将看起来像这样

“[object object]”

。这是因为

localStorage

和

sessionStorage

只能存储DOMStrings而不能存储对象。 文件

验证的简单测试：

sessionStorage.setItem('token', {'a':1})
let t = sessionStorage.getItem('token')
// "[object Object]".

---

您需要将数据串入

会话存储

。否则它将看起来像这样

“[object object]”

。这是因为

localStorage

和

sessionStorage

只能存储DOMStrings而不能存储对象。 文件

验证的简单测试：

sessionStorage.setItem('token', {'a':1})
let t = sessionStorage.getItem('token')
// "[object Object]".

---

正如Henrik所说，您必须将本地存储的值设置为

sessionStorage.setItem('token', JSON.stringify(data))

并将其用作

var token = JSON.parse(sessionStorage.getItem('token'));

---

正如Henrik所说，您必须将本地存储的值设置为

sessionStorage.setItem('token', JSON.stringify(data))

并将其用作

var token = JSON.parse(sessionStorage.getItem('token'));

---

谢谢，这解决了为什么令牌没有存储在会话中的问题。但是，我的登录页仍然出错：（json的意外结尾）…在我的登录页上，在Fetch中，我是否使用了正确的语法？我更新了我的代码段和代码笔。请您看一下好吗？再次

“授权”：“承载者”+localStorage.getItem（'token'）

是正确的格式好的，我已经确认了，但是，我的登录页仍然呈现相同的错误。在登录页上，当我手动将令牌复制/粘贴到fetch中时，页面将刷新，没有错误，并且我看到了客户机数据。我确保我的标题反映了以下内容：“授权”：“承载者”+sessionStorage.getItem（'token'）…在我的函数：requestUserInfo（）中，该函数在登录页和登录页的获取中调用。我在使用post的my fetchData（）函数中使用的fetch头中设置凭据的方式可能会有问题吗？…我在控制台中注意到，我在引用客户端API时出现了401（未经授权）错误，因此我想知道在我的post中，我的头是否格式正确？不是，“授权”：“承载者”+

sessionStorage

.getItem（'token'），its，

localStorage

。您可以通过转到browserThank中开发人员控制台中的“应用程序”选项卡来验证您是否真的在本地存储中存储了该值。谢谢，这解决了为什么令牌没有存储在会话中的问题。但是，我的登录页仍然出错：（json的意外结尾）…在我的登录页上，在Fetch中，我是否使用了正确的语法？我更新了我的代码段和代码笔。请您看一下好吗？再次

“授权”：“承载者”+localStorage.getItem（'token'）

是正确的格式好的，我已经确认了，但是，我的登录页仍然呈现相同的错误。在登录页上，当我手动将令牌复制/粘贴到fetch中时，页面将刷新，没有错误，并且我看到了客户机数据。我确保我的标题反映了以下内容：“授权”：“承载者”+sessionStorage.getItem（'token'）…在我的函数：requestUserInfo（）中，该函数在登录页和登录页的获取中调用。我在使用post的my fetchData（）函数中使用的fetch头中设置凭据的方式可能会有问题吗？…我在控制台中注意到，我在引用客户端API时出现了401（未经授权）错误，因此我想知道在我的post中，我的头是否格式正确？不是，“授权”：“承载者”+

sessionStorage

.getItem（'token'），its，

localStorage

。您可以通过在浏览器中转到开发人员控制台中的“应用程序”选项卡，验证是否确实在本地存储中存储了该值