Question

在我的React Native App中，我想创建一个Axios实例，以使用从AsyncStorage获取的令牌将标头发送到后端。但是，以下Token()总是返回一个对象（Promise）而不是实际的令牌，因此'Authorization'标头类似于[Object object]。

import axios from 'react-native-axios'
import AsyncStorage from "@react-native-community/async-storage"

const Token = async () => {
    try {
      await AsyncStorage.getItem("token").then(
        token => token
      );
    } catch (error) {
      return null;
    }
  }

export default axios.create({
      baseURL: 'http://192.168.1.100:8080/api',
      headers: {
        'Authorization': 'Bearer '+ Token(),
        'Content-Type': 'application/json'
      }
})

我该如何获取实际令牌并在axios实例中使用它？预先感谢。

Answer 1

更好的方法可能是使用axios interceptors。这样，您既可以拦截请求并发送令牌，也可以在发送刷新的令牌作为响应时将其获取并将其保存在异步存储中。

Answer 2

下面是我如何解决问题的方法。

正如@Prithwee所说，我决定使用axios（不是react-native-axios）拦截器，并在 App.js 中进行如下设置。

import React, {Component} from 'react';
import DrawerNavigator from './Utils/DrawerNavigator'
import {
  createAppContainer
} from 'react-navigation';
import axios from 'axios'
import AsyncStorage from "@react-native-community/async-storage"

axios.defaults.baseURL='http://192.168.1.100:8080/api'

axios.interceptors.request.use(
  async config => {
    const token = await AsyncStorage.getItem('token')
    if (token) {
      config.headers.Authorization = "Bearer "+token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
);

const App = createAppContainer(DrawerNavigator);

export default App;

Answer 3

通过使用@Pavindu的解决方案，我实现了该解决方案，该解决方案可以在所需的所有组件中实现。

base.js

import axios from 'axios'
import { AsyncStorage } from 'react-native'

axios.defaults.baseURL = 'http://yourAPIaddress.com'

const apiInstance = axios.create()

apiInstance.interceptors.request.use(
    async config => {
        const token = await AsyncStorage.getItem('token')
        //console.log(token)
        if (token) {
            config.headers.Authorization = 'Bearer ' + token
            //console.log(config.headers.Authorization)
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

export default apiInstance

您的组件

import apiInstance from '../api/base'


export default () => {
    const [stores, setStores] = useState([])
    
    use Effect(() => {
        apiInstance
            .get('../api/stores')
            .then(res => {
                setStores(res.data)
            })
            .catch(err => {
                alert(err)
                console.log(err)
            })
    },    [])
    
    return [stores]
}

从AsyncStorage获取令牌来创建Axios实例

3 个答案: