Still have problems with multiple request

Hi I have problem with my multiple requests. Only the first 401 error probably getting new access token, second not.

Here is my code. `import axios from “axios”; import createAuthRefreshInterceptor from “axios-auth-refresh”;

const baseUrl = “https://****.com/”; const instance = axios.create({ baseURL: baseUrl, });

// Function that will be called to refresh authorization const refreshAuthLogic = (failedRequest: any) => axios .post(“https://****/api/token/refresh/”, { refresh: localStorage.getItem(“refreshToken”), }) .then((tokenRefreshResponse) => { localStorage.removeItem(“accessToken”); localStorage.setItem(“accessToken”, tokenRefreshResponse.data.access);

  console.log(tokenRefreshResponse.data.access);

  failedRequest.response.config.headers["Authorization"] =
    "Bearer " + tokenRefreshResponse.data.access;

  return Promise.resolve();
});

createAuthRefreshInterceptor(instance, refreshAuthLogic);

export default instance;` No matter if I set the newest options like skipWhileRefreshing, pauseInstanceWhileRefreshing - situation is the same. I tried previous closed issues but didnt work 😦

[Flyrell]

Well, it’s probably because you mix instance and axios like it’s the same thing. Try to use instance after it’s created and it will work just fine 🙂

So the final code would be:

import axios from "axios";
import createAuthRefreshInterceptor from "axios-auth-refresh";

const baseUrl = "https://***/";

const instance = axios.create({
  baseURL: baseUrl,
});

// Function that will be called to refresh authorization
const refreshAuthLogic = (failedRequest: any) =>
  instance
    .post("https://***/api/token/refresh/", {
      refresh: localStorage.getItem("refreshToken"),
    })
    .then((tokenRefreshResponse) => {
      localStorage.setItem("accessToken", tokenRefreshResponse.data.access);

      console.log(tokenRefreshResponse.data.access);

      failedRequest.response.config.headers["Authorization"] =
        "Bearer " + tokenRefreshResponse.data.access;
      return Promise.resolve();
    });

function getAccessToken() {
  return localStorage.getItem("accessToken");
}

// Use interceptor to inject the token to requests
instance.interceptors.request.use((request) => {
  request.headers["Authorization"] = `Bearer ${getAccessToken()}`;
  return request;
});

createAuthRefreshInterceptor(instance, refreshAuthLogic);

export default instance;

[lensanag]

You need put the logic for set auth token on an axios interceptor as the example on documentation:

axios.interceptors.request.use(request => {
    request.headers['Authorization'] = `Bearer ${getAccessToken()}`;
    return request;
});

previusly you define the function getAccessToken for example on localStorage.