通过会话存储传递用户令牌时，React JS Error JSON意外结束

Question

我有一个登录页面，除了用户名和密码。 提交按钮后，页面会通过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());
  }

登录完整代码 ： https : //codepen.io/lkennedy009/pen/mLKPLv?editors=0010#0

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

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

着陆页的完整代码： https : //codepen.io/lkennedy009/pen/ELRKpw?editors=0010#0

请问我在做错什么吗？ 我已经检查了语法/设置，并与其他在线资源进行了比较，但仍然无法找出问题所在。

Answer 1

您需要将数据分类为sessionStorage 。 否则它将看起来像这样的"[object Object]" 。 这是因为localStorage和sessionStorage只能存储DOMString，而不能存储对象。 Storage.setItem的文档

简单测试以验证：

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

Answer 2

正如Henrik发布的那样，您必须将值设置为local Storage as，

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

并用作

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