AsyncStorage将令牌传递到标头发布请求

时间:2019-12-06 07:26:43

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

我的发帖请求不断出现401未经授权的服务器错误。向数据库写入项目是微不足道的请求。我不知道AsyncStorage如何详细工作,但我读它就像本地存储一样。 我知道它是未加密的异步持久性键值存储系统。

这是react-native应用程序,具有redux和saga和axios之类的http客户端,后端是laravel。 在saga响应中,当用户登录时,我得到

source  adset        kpi    1/1/19  1/2/19
fb     abc         impression   100 200
fb     abc         click    140 130
fb     abc         spend    20  40
cl     abc         impression   300 500
cl     abc         click    200 200
cl     abc         spend    50  50

但是在token = eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9wb3Bpcy5taWxzLm1lXC9hcGlcL2F1dGhcL2xvZ2luIiwiaWF0IjoxNTc1NjE1OTg5LCJleHAiOjE1NzU2MTk1ODksIm5iZiI6MTU3NTYxNTk4OSwianRpIjoiMlBRaWVMUjdQT0h4VnZyMCIsInN1YiI6MSwicHJ2IjoiODdlMGFmMWVmOWZkMTU4MTJmZGVjOTcxNTNhMTRlMGIwNDc1NDZhYSJ9.dBYL8H9TVaXxEZgIZB56sbYSHp530D--Lni4klv9SRg 中,当我要发布请求以在日期数据库中写入项目时,我的api.js是:

token

我的代码是Api.js:

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

我的传奇是:

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

我的服务deviceStorage.js是:

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'))
    }
}

2 个答案:

答案 0 :(得分: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)
}

答案 1 :(得分:0)

首先,将await添加到loadToken函数中

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