使用从 AsyncStorage 获取令牌创建 Axios 实例

Question

在我的 React Native 应用程序中，我想创建一个 Axios 实例，以使用从 AsyncStorage 获取的令牌将 headers 发送到后端。然而，下面的 Token() 总是 returns 一个 object( Promise ) 而不是实际的令牌，所以 'Authorization' header 就像 [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 实例

Create Axios instance with taking token from AsyncStorage

async-await

react-native

asyncstorage

axios