在客户端处理多个 JWT 以访问多个资源端点

Question

我试图了解如何在前端处理多个 JWT 令牌，这些令牌将访问相同的用户不可知的 api 端点。

例如，我调用两个端点来获取 PrimaryUser 的 JWT 和 SecondaryUser 的 JWT。在后端，它们作为 DualUser 捆绑在一起。在这些令牌中，我有每个用户的 userId。

我有多个资源端点，它们将根据 JWT 中给出的 userId 进行更新。我有大约 100 个。

在前端，当我需要更新一个资源时，我目前正在覆盖 Authorization 标头：

// updateUser(payload: object, config: RequestConfig)
// will update the user with primary user (default) Authorization header w/ JWT token
updateUser({firstName: 'Bob'})

// secondaryUserRequestConfig(): returns config with overriding Authorization w/ JWT tokens 
updateUser({firstName: 'Ted'}, secondaryUserRequestConfig)

另一种方法是创建一个 JWT，并为每个 PrimaryUser.userId 和 SecondaryUser.userId 设置后端处理显式参数，但更新 100 个端点似乎很多。有没有一种更简洁的方法来处理这种情况，我想保持后端端点相对不可知，但也不必传入secondaryUserRequestConfig

Answer 1

您可以使用axios interceptors 来动态更改 axios 配置请求，

使用 URL 作为端点 1 和端点 2 的范围，您可以通过查看当前请求的 url 来更改它们的配置：

import * as axios from "axios";

function createAxios() {
  let instance = axios.create();
  instance.interceptors.request.use(
    function (config) {
      let [endpoint, url] = config.url.split("#");
      if (endpoint === "cat") {
        config.url = `https://api.thecatapi.com/${url}`;
        config.headers = {
          "X-Custom-Interceptor": "For Cat"
        };
      }
      if (endpoint === "anime") {
        config.url = `https://api.jikan.moe/${url}`;
      }
      return config;
    },
    function (error) {
      // Do something with request error
      return Promise.reject(error);
    }
  );
  return instance;
}


// Later in you code...
let remote = createAxios();

export default function App() {
  // ...
  return (
    <div>
      <button
        onClick={() => {
          remote.get("cat#v1/images/search")
        }}
      >
        Endpoint 1
      </button>
      <button
        onClick={() => {
          remote.get("anime#/v3/anime/1/episodes/1")
        }}
      >
        Endpoint 2
      </button>
    </div>
  );
}

从那里，您可以附加任何您想要的标题，

我在以下位置构建了一个工作示例： https://codesandbox.io/s/2021-03-26-axios-with-interceptor-zs2zg?file=/src/App.js:0-1614