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

Question

在我的 React Native 应用程序中，我想创建一个 Axios 实例，以使用从

AsyncStorage

获取的令牌将标头发送到后端。但是，以下

Token()

始终返回一个对象（ Promise ）而不是实际令牌，因此“授权”标头类似于

[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

以下是我如何解决这个问题的。

正如@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 2

更好的方法可能是使用

axios interceptors

。这样，您既可以拦截请求并发送令牌，也可以在发送刷新的令牌作为响应时获取令牌并将其保存在异步存储中。

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]
}