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的“授权”部分时，它可以正常运行。 ......我可以帮忙解决一下我做错了什么吗？

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

令牌未定义，因此它将是“未定义承载”，要么在fetch(...)之前使用sessionStorage.getItem("token")定义，要么在获取标题中执行以下操作：

'Authorization': 'Bearer ' + sessionStorage.token

React JS如何使用会话存储

1 个答案: