AsyncStorage 将令牌传递给标头发布请求答案

【问题标题】：AsyncStorage pass token to header post requestAsyncStorage 将令牌传递给标头发布请求
【发布时间】：2019-12-06 07:26:43
【问题描述】：

我的发布请求经常收到 401 未经授权的服务器错误。在数据库中写入项目是微不足道的发布请求。我不知道 AsyncStorage 的详细工作原理，但我读到它就像本地存储。我知道它是未加密的、异步的、持久的、键值存储系统。

它是 react-native 应用程序，具有 redux 和 saga 以及类似 http 客户端的 axios，后端是 laravel。在传奇响应中，当用户登录时，我得到 p>

token = eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9wb3Bpcy5taWxzLm1lXC9hcGlcL2F1dGhcL2xvZ2luIiwiaWF0IjoxNTc1NjE1OTg5LCJleHAiOjE1NzU2MTk1ODksIm5iZiI6MTU3NTYxNTk4OSwianRpIjoiMlBRaWVMUjdQT0h4VnZyMCIsInN1YiI6MSwicHJ2IjoiODdlMGFmMWVmOWZkMTU4MTJmZGVjOTcxNTNhMTRlMGIwNDc1NDZhYSJ9.dBYL8H9TVaXxEZgIZB56sbYSHp530D--Lni4klv9SRg

但是在api.js 中，当我想要发布请求以在数据库中写入项目时，我的token 是：

 Promise {
  "_40": 0,
  "_55": null,
  "_65": 0,
  "_72": null,
}

我的代码是 Api.js：

import axios from 'axios'
import deviceStorage from './services/deviceStorage';

var config = {
    headers: {'Authorization': "bearer " + deviceStorage.loadToken()}
};

export function addProduct_api(item) {
    return axios.post('http://popis.mils.me/api/popis',item, config)
}

我的传奇是：

export function* addProduct(action) {
    const response = yield call(addProduct_api, action.payload)
    if(!response || !response.data) {
        return yield put(addProduct_failure('Internal server error'))
    }
    if(response.status === 200) {
        return yield put(addProduct_success(response.data))
    } else {
        return yield put(addProduct_failure('Error for login user'))
    }
}

export function* loginUser(action) {
    const response = yield call(login_api, action.payload)
    if(!response || !response.data) {
        return yield put(login_failure('Internal server error for login user'))
    }
    if(response.status === 200) {
        deviceStorage.saveItem('token', response.data.token)
        return yield put(login_success(response.data))
    } else {
        return yield put(login_failure('Error for login user'))
    }
}

而我的服务 deviceStorage.js 是：

import { AsyncStorage } from 'react-native';

const deviceStorage =  {
    async saveItem(key, value) {
        try {
            await AsyncStorage.setItem(key, value)
        } catch (error) {

        }
    },

    async loadToken() {
        try {
            const token = AsyncStorage.getItem('token')
            console.log('token in service--------------------------------', token);
            return token
        } catch (error) {
            console.log('Load token error: ', error);
        }
        return token
    }
}
export default deviceStorage

【问题讨论】：

标签： reactjs react-native redux axios redux-saga

【解决方案1】：

AsyncStorage 返回一个Promise。这就是为什么你在后端得到一个 Promise 对象的原因。

当您在 AsyncStorage 中获取项目时，您应该使用 await，就像您在设置它时所做的那样。

async loadToken() {
        try {
            const token = await AsyncStorage.getItem('token')
            console.log('token in service--------------------------------', token);
            return token
        } catch (error) {
            console.log('Load token error: ', error);
        }
        return token
    }

另外，由于loadToken 函数也是异步的。您应该像这样在addProduct_api 中使用它：

export function addProduct_api(item) {
var token = await deviceStorage.loadToken();
var config = {
    headers: {'Authorization': "bearer " + token}
};
    return axios.post('http://popis.mils.me/api/popis',item, config)
}

【讨论】：

好的，很多。我像你写的那样改变了代码。现在，deviceStorage 中的令牌没问题，但在 Api.js 中我有相同的 promise 令牌？？？
console.log 在您的loadToken 函数中的结果是什么？
于服务-------------------------------- eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9wb3Bpcy5taWxzLm1lXC9hcGlcL2F1dGhcL2xvZ2luIiwiaWF0IjoxNTc1NjIzMDMyLCJleHAiOjE1NzU2MjY2MzIsIm5iZiI6MTU3NTYyMzAzMiwianRpIjoibWlKSWJrcXZOUlU3bVlsMSIsInN1YiI6MSwicHJ2IjoiODdlMGFmMWVmOWZkMTU4MTJmZGVjOTcxNTNhMTRlMGIwNDc1NDZhYSJ9.il6Y05aMpLd6db9Cas9H6J6IRs9Rf0vizgDbWrcT5vg 令牌跨度>
在服务中可以，但在 api 中不行。我不知道为什么。 api++++++++++中api的tokenTOKEN: Promise { "_40": 0, "_55": null, "_65": 0, "_72": null, }
你也可以console log你的config在你的addProduct_api中。

【解决方案2】：

首先在loadToken函数中添加await

async loadToken() {
    try {
        const token = await AsyncStorage.getItem('token')
        console.log('token in service--------------------------------', token);
        return token
    } catch (error) {
        console.log('Load token error: ', error);
    }
    return token
}

然后像这样更新addProduct_api函数

export async function addProduct_api(item) {
var config = {
        headers: {'Authorization': "bearer " + await deviceStorage.loadToken()}
    };
    return axios.post('http://popis.mils.me/api/popis',item, config)
}

【讨论】：