通过会话存储传递用户令牌时，React JS Error JSON意外结束 [英] React JS Error unexpected end of json when passing user token via session-storage

问题描述

我有一个登录页面，除了用户名和密码.提交按钮后，页面会通过json/api处理用户凭据并生成令牌，从而将用户路由到登陆页面，该登陆页面会向客户端显示其各自信息的下拉列表.

I have a login page, which excepts the username and password. Upon button submission, the page processes the user credentials via a json / api and generates a token thus routing the user over to a landing that presents the client with a drop-down of their respective info.

我的登录页面正在从API获取用户令牌(通过console.log确认)，但是我遇到的问题是使令牌从登录页面传递到登录页面.

My login page is getting the user token from the API (confirmed via console.log), but the problem I'm encountering is getting the token to pass from the login page over to the landing page.

现在，当我手动将生成的令牌粘贴到登录页面时，下拉列表会显示用户的数据，因此问题在于将生成的令牌传递到登录页面.

Now, when I manually paste the generated token into my landing page, the dropdown list displays the user's data, so the issue is getting the generated token to pass over to the landing page.

首先，在登录页面中，我具有一个用于从API检索客户端令牌的功能.我称此功能为按钮提交:

First, in the login page, I have a function for retrieving the client's token from the API. I call this function on button submit:

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

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

...for the landing page, in the snippet below, am retrieving the token from the login page:

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

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

Could I please get some help as to what am doing wrong? I've checked my syntax / setup and compared against other online resources, but still unable to figure out the issue.

推荐答案

正如Henrik所发布的那样，您将必须将本地存储"的值设置为

As Henrik has posted, you will have to set the value to local Storage as,

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

并将其用作

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

这篇关于通过会话存储传递用户令牌时，React JS Error JSON意外结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！