React JS如何使用会话存储在页面之间传递值答案

【问题标题】：React JS how to pass values between pages using session storageReact JS如何使用会话存储在页面之间传递值
【发布时间】：2018-10-22 20:56:12
【问题描述】：

我有一个接受用户名和密码的 react JS 登录页面。输入用户名和密码后，凭据会根据 json (API) 文件进行处理，该文件会为客户端生成令牌。 我的目标是在客户登录后将令牌传递到登录页面，并使用客户各自的数据填充下拉列表。问题我面临的是让客户令牌从我的登录页面传递到登录页面。

在我的登录页面中，我使用 Fetch 从 API 中检索令牌，然后使用会话存储存储令牌。获取token的代码sn-p：

componentDidMount() {  
        this.fetchData(); 
    } 

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

      //authenticate request
      requestUserInfo() {
        var token = sessionStorage.getItem("token");
        return fetch('http://myapiaut:1111/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 }))
    }

...回到登录页面，我确认我正在通过 fetchData 函数获取令牌，但我遇到的问题是正确存储令牌以便它可以传递到登录页面。

仅供参考 - 我已经构建了 登录页面，当我手动将生成的令牌复制到 Fetch 的授权部分时，它可以正常运行。 ...请问我做错了什么可以帮助我吗？

【问题讨论】：

令牌是否存储到会话存储中？
是登录和登陆不同的域吗？如果没有，为什么不像以前那样使用sessionStorage.getItem？
@Boy With Silver Wings - 不，这就是正在努力解决的问题（将令牌存储在会话存储中）......我查看了我的语法，但似乎无法发现为什么令牌不是得到存储。在登录页面 sn-p 中，我尝试使用 console.log 来查看是否正在捕获令牌，但我收到一条消息，表明它无法访问（在我在 console.log 上写的那一行）。我是否在右侧部分实现了 console.log（请参阅函数 requestUserInfo）？如果您有任何建议，请告诉我，我对 React 还是很陌生。两个页面（同一个域）

标签： javascript reactjs api session-storage

【解决方案1】：

问题出在这里：

.then(data => this.setState({ data: data }))
.then(data => sessionStorage.setItem('token', data))

setState 无法解析 Promise，因此它没有 then()

将其更改为：

.then(data => {
  this.setState({ data: data })
  sessionStorage.setItem('token', data)
})

在着陆页中：

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

token 没有定义，所以它是'Bearer undefined'，要么在fetch(...) 之前用sessionStorage.getItem("token") 定义它，要么在获取头文件中做类似的事情：

'Authorization': 'Bearer ' + sessionStorage.token

【讨论】：