Question

我想以标头提取方法发送JWT。并在首页中提供带有asyncStorage的令牌，但是当我在此页中设置状态时，令牌中的错误未定义。如何针对JWT方法在此方法中解决此问题

constructor(){
    super();
    this.state = {
        isOpen: false,
        isClose:false,
        isDisabled: false,
        swipeToClose: false,
        sliderValue: 0.3,
        token:null
    };
    this.GetToken=this.GetToken.bind(this);
}

componentDidMount() {
    AsyncStorage.getItem('token', (error, token) => {
        this.GetToken({token})
    });
    console.log('tokennnn', token)
}

GetToken=(token)=>{
    this.setState({token:token});

    fetch('url/clients/theater/all?page_num=1/', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            Authorization: 'JWT'+ this.state.token,
        }
    }).then((response) => response.json())
        .then((responseJson) => {
            console.log('response',responseJson)
            console.log('response',this.state.token)
        })
        .catch((error) => {
            console.error(error);
        });
};

Answer 1

在componentDidMount中，删除console.log，因为由于令牌未定义，它将触发错误，因为您在Asyncstorage回调之外具有console.log。我还建议您检查错误是否为空，然后调用this.GetToken，否则抛出错误。

 componentDidMount() {
        AsyncStorage.getItem('token', (error, token) => {
            if (!error) {
               this.GetToken(token)
            } else {
               console.log(`Error fetch token: ${error}`)
            }
        });
 }

在GetToken中，由于令牌已通过GetToken参数传递，因此您不需要setState

 GetToken=(token)=>{
        fetch('url/clients/theater/all?page_num=1/', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                Authorization: 'JWT'+ token, 

            }
        }).then((response) => response.json())

            .then((responseJson) => {
                console.log('response',responseJson)
                console.log('response',token)

            })
            .catch((error) => {
                console.error(error);
            });
    };

Answer 2

您可以在主体部分而不是标头部分中发送令牌。例如：

_update = (token) => {
      const formData = new FormData(),
      formData.append('jwt', token);
      fetch("url", {
        method: 'POST',
        header: {
            'Accept': 'application/json',
            'Content-type': 'multipart/form-data,application/json,*',
        },
        body:formData
    })
    .then((response) => response.json())
    .then((responseJSON) => {
        console.log(responseJSON)
    })
    .catch((error) => {
        console.error(error)
    })
}

在标头中发送JWT令牌本机反应

2 个答案: