CODEWITHSUNDEEP
javascriptreactjsaxios
confusedWarrior
confusedWarrior

Reputation: 1330

Component doesn't re-render on follow up request after token refresh

This is my axios-hoook.js and I am using axios-hooks package.

import useAxios from 'axios-hooks';
import axios from 'axios';
import LocalStorageService from './services/local-storage.service';
import refreshToken from './refresh-token';

axios.defaults.baseURL = 'http://localhost:3000/api/v1';
axios.defaults.transformResponse = [
  (responseData) => {
    const { data, error } = JSON.parse(responseData);
    return error || data;
  },
];

// request interceptor to add token to request headers
axios.interceptors.request.use(
  async (config) => {
    const token = LocalStorageService.getAccessToken();
    if (token) {
      config.headers = {
        authorization: token,
      };
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// response interceptor intercepting 401 responses, refreshing token and retrying the request
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    const { config } = error;
    if (error.response?.status === 401 && !config._retry) {
      config._retry = true;
      refreshToken(LocalStorageService.getRefreshToken())
        .then((res) => {
          const { accessToken } = res.data.data;
          LocalStorageService.setAccessToken(accessToken);
          return axios(config);
        })
        .catch((err) => {
          if (err.response.status === 401) {
            LocalStorageService.setUser(null);
            window.location.href = '/login';
          }
          return Promise.reject(err);
        });
    }
    return Promise.reject(error);
  }
);

export default useAxios;

This is the Course.jsx where it is being used.

const Course = () => {
const [{ data: courses = [] }, refetchCourse] = axiosHook(ApiConfig.COURSE.GET_COURSES.url);

return (
  <Datatable
    entity={entity}
    columns={courseColumns}
    rows={courses}
    deleteRow={handleDeactivate}
    viewRow={handleView}
  />
 )
}

Image

Upvotes: 0

Views: 577

Answers (2)

confusedWarrior
confusedWarrior

Reputation: 1330

There was an error in my code. I was not returning the promise.

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    const { config } = error;
    if (error.response?.status === 401 && !config._retry) {
      config._retry = true;
      return refreshToken(LocalStorageService.getRefreshToken()) // this line
        .then((res) => {
          const { accessToken } = res.data.data;
          LocalStorageService.setAccessToken(accessToken);
          return axios(config);
        })
        .catch((err) => {
          if (err.response.status === 401) {
            LocalStorageService.setUser(null);
            window.location.href = '/login';
          }
          return Promise.reject(err);
        });
    }
    return Promise.reject(error);
  }
);

Upvotes: 0

Simone
Simone

Reputation: 3976

In the axios-hooks docs there's a link to a working example to implement a refresh token feature. It is running in CodeSandbox at this link https://codesandbox.io/s/axios-hooks-authentication-zyeyh.

Compare that with your example and you'll find the reason why yours doesn't work.

Upvotes: 1

Related Questions