如何在使用API 时通过reactjs传递JsonWebToken x-access-token？

Posted 2021-04-08

如何在使用带反应的API时传递动态JWT x-access-token？我知道如何使用fetch方法使用API​​。

componentDidMount(){
    fetch('http://example.com/api/admin/dailyPosts')
    .then(response => response.json())
    .then(response => {
      this.setState({
        postCount: response
      })
    })
  }

在安慰this.state.postCount时，我得到一个空数组，因为没有提供令牌。那么如何将动态令牌传递给此API？

答案

当您拥有API或生成的令牌时，请将其设置为浏览器的cookie

import { Cookies } from 'react-cookie';
Cookies.set(token, auth_token_here, {path: '/'});

设置从浏览器获取cookie并使用请求方法中的令牌设置头对象，如

import { Cookies } from 'react-cookie';

componentDidMount(){
    let auth_token = Cookies.get(token)
    let header_obj = {'Authorization': auth_token};
    fetch(url, { headers : header_obj}).then();
}

假设您将令牌存储在浏览器中，或者可以从redux中获取道具