HeaderSetting custom according to usage.

[Ruubber]

Hello,
Currently I'm working on a project that combines two admins provided to admins and consumers.
I store the authTokens of both sides in the redux store.

A question arose while setting the header using prepareHeader in rtk query using the two stored tokens.

Depending on the purpose of the api (manager, consumer), I want to set the appropriate header.
However, I'm worried about what pattern to proceed with this.
If you have a way, please share.

export const baseQuery = () =>
  fetchBaseQuery({
    prepareHeaders: (headers, api) => {
      const token =  ???; /// Is there a way to set this token for the purpose of the api?
      if (token) {
        headers.set("authorization", `Bearer ${token}`);
      }
      return headers;
    },
    baseUrl,
    responseHandler: (response) => {
      console.log(response.url);
      if (response.status === 401) /// remove action
    },
  });

[phryneas]

You could e.g. use api.endpoint to get the name of the querying endpoint. You can also set headers directly in your endpoint's query function.

Generally though, you should try to keep your authentication in a cookie (set and read only by the server, never by the client), and those cookies could just be set by the server scoped for the path of either the admin or the user api endpoints.

[Ruubber]

@phryneas
Even so, I had a question about the api's endPoint.
To save the token above, I updated the information in the extraReducer using the endPoints of the two apis.
But in this case unfortunately both reducers were updated in react when the endpoint names overlapped.
When designing this pattern, was it designed under the premise that endPoint must be unconditionally unique?

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    userLogout: (state) => {
      state.user = initialState.user;
    },
    adminLogout: (state) => {
      state.admin = initialState.admin;
    },
  },
  extraReducers: (builder) => {
    builder.addMatcher(
      authApi.endpoints.login.matchFulfilled,
      (state, { payload }) => {
        console.log("user");
        state.user = {
          ...payload.data.user,
          authToken: payload.data.authToken,
          refreshToken: payload.data.rfToken,
        };
      },
    );
    builder.addMatcher(
      adminApi.endpoints.login.matchFulfilled,
      (state, { payload }) => {
        console.log("admin");
        state.admin = {
          ...payload.data.user,
          authToken: payload.data.authToken,
          refreshToken: payload.data.rfToken,
        };
      },
    );
  },
});

[phryneas]

You cannot inject two endpoints with the same name into the same api. Either they will overwrite each other, or the second injectEndpoints call will not have any effect. In the end, you inject these both into your baseApi, and the baseApi, authApi and adminApi are the same object, just with different types attached.

[Ruubber]

Thank you for your quick answer!