从 AsyncStorage 获取令牌创建 Axios 实例答案

【问题标题】：Create Axios instance with taking token from AsyncStorage从 AsyncStorage 获取令牌创建 Axios 实例
【发布时间】：2019-11-23 19:04:15
【问题描述】：

在我的 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 实例中使用它？

【问题讨论】：

标签： react-native async-await axios asyncstorage

【解决方案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;

【讨论】：

您是否随时为 await AsyncStorage.getItem('token') 获得空值？我使用与您相同的代码，但在使用应用程序时有时等待 AsyncStorage.getItem('token') 返回 null 令牌。
也许你没有先使用AsyncStorage.setItem("token",value)设置令牌？

【解决方案2】：

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

【讨论】：

【解决方案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]
}

【讨论】：