React Native 中的动态 HTTP Header

Question

我正在开发一个带有 React Native 的应用程序。在应用程序中，出于安全原因，我们使用不记名令牌来调用 API。我已经设法用静态 header 内容调用 API。但是，我正在努力寻找一种动态更新 header "Authorization" 的方法。我创建了一个 Utility class 并从那里获取 header 值。但我不明白如何动态设置授权密钥。我创建了以下方法：

Utility.headers = function() {
  return {
  "content-type": "application/x-www-form-urlencoded",
  "accept": "application/json",
  "api-token": "XXXXXXXXXXXXXXXXXXXXXXXXXX",
  "Authorization": "Bearer XXXXXXXXXXXXXXXXXXXXX"
  }
}

此方法将 return API headers。但是我的授权值是动态的。而且我不知道如何使它动态。请帮我解决一下这个。我是 React Native 新手

提前致谢。

Answer 1

使用 AsyncStorage 存储您的授权 header。

await AsyncStorage.setItem('bearer', '...');

然后进入你的函数。

像这样：

    Utility.headers = async function () {
    const jwt = await AsyncStorage.getItem('bearer');

    return {
        "content-type": "application/x-www-form-urlencoded",
        "accept": "application/json",
        "api-token": "XXXXXXXXXXXXXXXXXXXXXXXXXX",
        "Authorization": "Bearer " + jwt
    }
}

您可以在此处阅读有关 AsyncStorage 的更多信息：https://facebook.github.io/react-native/docs/asyncstorage.html

React Native 中的动态 HTTP Header

Dynamic HTTP Header in react Native

api

dynamic

http-headers

react-native

react-native-ios