Logout If Token Is Expired

I'm working on a react application that consists of many API requests. The structure of the application is When logging in, I'm receiving a token on response and I'm saving the tok

Solution 1:

Put this code in your project initialize or loading section, and run it once then every time you call axios this code will check errors

Change your variable here and use it

// Add a request interceptor
  axios.interceptors.request.use((config) => {
    let token = localStorage.getItem("token");
    if (token) {
      config.headers.credentials = 'include';
      config.headers.Authorization = `Bearer ${token}`;
      config.headers['Access-Control-Allow-Origin'] = '*';
      config.headers['Content-Type'] = 'application/json';
    }

    return config;
  }, (error) => {
    alert('interceptor request has error');
    returnPromise.reject(error);
  });

  // Add a response interceptor
  axios.interceptors.response.use((response) => {
    return response;
  }, (error) => {

    if (error.response && error.response.data && error.response.data.error &&
      (error.response.data.session === false || error.response.data.session === "false")) {
      localStorage.removeItem("userId"); // <-- add your varwindow.location = "/";   // <-- add your path
    }
    elseif (error.response && error.response.data && error.response.data.error && error.response.data.error.message) {
      toastMessage(error.response.data.error.message, 1);
    }
    elseif (error.response && error.response.status === 401) {
        localStorage.removeItem("userId"); // <-- add your varwindow.location = "/";  // <-- add your path
      } elsereturnPromise.reject(error);
  });

Solution 2:

You can write your own wrapper for the axios and it should be something like this:

import axios from'axios';

const request = axios.create({
  baseURL: backUrl,
  timeout: 5000,
});

exportconstget = url => {
  const expiresIn = localStorage.getItem('expiresIn');
  const accessToken = localStorage.getItem('accessToken');

  if (expiresIn && Date.now() > expiresIn) {
    const refreshToken = localStorage.getItem('refreshToken');
    request
      .post('/oauth/token', {
        grant_type: 'refresh_token',
        refresh_token: refreshToken,
      })
      .then(res => {
        store.dispatch(
          loginSubmitted(
            res.data.access_token,
            res.data.refresh_token,
            res.data.expires_in,
          ),
        );

        localStorage.setItem('accessToken', res.data.access_token);
        localStorage.setItem('refreshToken', res.data.refresh_token);
        localStorage.setItem('expiresIn', res.data.expires_in);

        return request.get(url, {
          headers: { Authorization: `bearer ${res.data.access_token}` },
          accessToken: res.data.access_token,
        });
      })
      .catch(err => {
        localStorage.removeItem('accessToken');
        localStorage.removeItem('refreshToken');
        localStorage.removeItem('expiresIn');
      });
  }

  return request.get(url, {
    headers: { Authorization: `bearer ${accessToken}` },
    accessToken,
  });
};

so it will check the exprire_date before each request and send a new request for a new token so user won't log out

Solution 3:

Yes you're partially correct, in case you cannot use refresh tokens (which should be given to maintain the login state ideally).

Use axios interceptors to intercept the response before it becomes an error like 401 which needs to be handled.

axios.interceptors.response.use(function (response) {
    // 200 type responses, this should be left as it isreturn response;
  }, function (error) {
    // Handle your 401 error, maybe the UI changes and removing from local storagereturnPromise.reject(error);
  });