React JS为什么sessionStorage.getItem无法读取从另一个页面传递的标记值？

Question

我有一个接受用户名和密码的登录页面;页面使用json / API，在输入和提交用户名和密码时生成令牌。 我的目标是将令牌从登录页面传递到目标网页，根据令牌显示用户的相应数据。

我遇到的问题是，在我的登陆页面的fetch子句中，令牌未被传递，这导致“意外结束json”错误。

来自Landing Page的

代码片段：

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

......问题似乎出现在这一行：

'Authorization': 'Bearer ' +sessionStorage.getItem('token')

...当我注意到正在返回一个空白对象时，我通过chrome控制台确认了。现在，当我从控制台复制令牌并手动将其粘贴到同一行时，例如：

'Authorization': 'Bearer 11111.22222.555555' 

...我的登陆页面显示了客户端的数据（没有错误），我复制并粘贴到上面提供的代码片段中的令牌将令牌呈现给控制台。

另外一件事，我还在登陆页面的渲染部分执行了console.log： console.log（“客户端令牌：”+ sessionStorage.token）; ...并确认令牌正在从登录页面传递，但我上面提供的代码行没有捕获令牌。

下面，我提供了完整代码的网址： 登录页面： https://codepen.io/lkennedy009/pen/mLKPLv?editors=0010#0

目标网页： https://codepen.io/lkennedy009/pen/ELRKpw?editors=0010#0

......我能不能得到一些关于我做错了什么的帮助？我查看了有关会话和本地存储的语法/概念，但仍然无法确定它做错了什么。