React JS如何使用會話存儲在頁面之間傳遞值

Question

我有一個反應JS登錄頁面，接受用戶名和密碼。 輸入用戶名和密碼后，將根據json（API）文件處理憑據，該文件為客戶端生成令牌。 我的目標是在客戶端登錄后將令牌傳遞到登錄頁面，並使用客戶端相應的數據填充下拉列表。 我面臨的問題是讓客戶端令牌從我的登錄頁面傳遞到登錄頁面。

在我的登錄頁面中，我使用Fetch從API檢索令牌，然后使用會話存儲存儲令牌。 獲取令牌的代碼段：

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的Authorization部分時，我已經構建了登錄頁面並且它正常運行。 ......可能，我能得到一些關於我做錯了什么的幫助嗎？

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

令牌未定義，因此它將是'Bearer undefined'，或者在使用sessionStorage.getItem("token") fetch(...)之前定義它，或者在fetch headers中執行以下操作：

'Authorization': 'Bearer ' + sessionStorage.token