在apisauce中从SecureStore加载头

Question

后端中的所有端点都需要Authorization头。此标头存储在SecureStore中。

问题陈述

我希望为登录后的每个Authorization调用加载头( JWT令牌)。现在，这需要一个async操作，即authStorage.getToken。

这是我的client.js ( apisauce客户端)。

client.js

import { create } from "apisauce";
import authStorage from "../auth/storage";
import IP from "../config/network";

const restoreToken = async () => {
  return await authStorage.getToken("idToken");
};

const apiClient = (auth_token = "") =>
  create({
    baseURL: "http://" + IP + ":8990",
    headers: { Authorization: auth_token }, // This I've added later
  });

export default apiClient;

这是PostsApi，它使用apiClient进行调用。

PostsApi.js

import apiClient from "./client";

const endpoint = "/api/";
const bookmarkEndpoint = "/bookmark/";
const getPosts = (last_id = 0, limit = 10) => {
  return apiClient.get(endpoint + "?last_id=" + last_id + "&limit=" + limit);
};

const toggleBookmark = (item_id) => {
  return apiClient.get(bookmarkEndpoint + "?item_id=" + item_id);
};

export default {
  getPosts,
  toggleBookmark,
};

我的理解

我知道，如果我能够在client.js本身中添加标头，那么每次有API调用时都会注入它。我试过：

const restoreToken = async () => {
  return await authStorage.getToken("idToken");
};

但是我不知道如何在client.js中调用这个异步操作。

奖金问题

此令牌( idToken )将每小时重新加载一次，因此最好每次从SecureStore获取令牌，而不是保存一次。

谢谢。

接受的答案和对我有用的东西

为我工作apisauce的setHeader：记录在这里

公认的答案是详细钻研的axios设置报头。因此，如果有人直接使用axios客户端，他们可以看到已接受的答案，如果您是apisauce用户，请使用库中提供的setHeader功能。

干杯。

Answer 1

1. 您必须将您的令牌存储在状态(可以是redux或本地状态)。
2. 在保存/刷新/重新加载令牌期间，您将设置HTTP客户端的标头。

可以使用以下命令设置标头(示例)

export const setAuthToken = (token) => {
  apiClient.defaults.headers.common['Authorization'] = ''
  delete apiClient.defaults.headers.common['Authorization']

  if (token) {
    apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`
  }
}

调用上述函数，在重新加载/刷新/创建令牌时设置令牌。

const restoreToken = async () => {
  return await authStorage.getToken("idToken").then(token =>  setAuthToken(token));
};