Two tokens with prepareHeaders

[User6531]

Hello everyone, I have a question about the prepareHeaders. According to the documentation, it seems straightforward: I just need to retrieve the token from the storage and then add it to the headers. However, in my situation, I have two different tokens for different types of requests. So, I'd like to share my solution with you and get your opinion on it. Thank you!

const baseQueryInitial = fetchBaseQuery({
  baseUrl: mainBaseUrl,
  prepareHeaders: async (headers, api) => {
    const { getState, endpoint } = api;
    const state = getState() as RootState;

    if (endpointsWithB2CToken.includes(endpoint)) {
      const appConfig = selectAppConfig(state);
      const b2cToken: string = isEmptyObject(appConfig)
        ? ""
        : await acquireAccessToken(appConfig);

      headers.set("authorization", `Bearer ${b2cToken}`);
    } else {
      const internalToken = selectInternalToken(state);

      headers.set("authorization", `Bearer ${internalToken}`);
    }

    return headers;
  },
});

[EskiMojo14]

seems fine to me - i imagine this is the main reason endpoint is passed as part of the api object.

[User6531]

😅 Oh, okay. Thank you for your feedback.

[User6531]

What do you think about using this approach? I will drill the property through headers, so I will put the type of token that should be used in the query, and then in the prepareHeaders function, I will read it and delete it from the headers.

builder.query({
  query: (customerId) => ({
    url: '...url'
    headers: {
      tokenType: "first",
    },
  }),
});


prepareHeaders: async (headers) => {
  const tokenType = headers.get("tokenType");
  headers.delete("tokenType");

  if (tokenType === 'first') {
    headers.set("authorization", `Bearer ${firstToken}`);
  } else {
    headers.set("authorization", `Bearer ${secondToken}`);
  }

  return headers;
}

[EskiMojo14]

sure, that works too 🙂