CODEWITHSUNDEEP
axios
user15018969
user15018969

Reputation:

What is cancelToken by axios and how I fix it?

I made a React app and I making requests to the backend using Axios. I created a middleware in my backend for authorization and on the frontend side I'm trying to pass to every call that is made to the backend the auth token if exists in the localStorage. Before I added the logic for that everything worked perfectly, now every time I try to log in or register I get this in the console

TypeError: Cannot read properties of undefined (reading 'cancelToken')
    at throwIfCancellationRequested (dispatchRequest.js:12:1)
    at dispatchRequest (dispatchRequest.js:24:1)
    at async auth.js:6:1

My index.js which handles every call to the backend looks like this:

import axios from 'axios';

const API = axios.create({
    baseURL: 'http://localhost:3500'
})


API.interceptors.request.use((req) => {
    if (localStorage.getItem('profile')) {
        req.headers.Authorization = `Bearer ${JSON.parse(localStorage.getItem('profile')).token}`
    }

})

export const fetchHunts = () => API.get('/hunts');

export const createHunt = (newHunt) => API.post('/hunts', newHunt);

export const updateHunt = (id, updatedHunt) => API.patch(`/hunts/${id}`, updatedHunt);

export const deleteHunt = (id) => API.delete(`/hunts/${id}`);


export const signInAdmin = (formData) => API.post('/admins/signinadmin', formData);
export const signUpAdmin = (formData) => API.post('/admins/signupadmin', formData);

Right now I am not logged in so there is no profile in the localStorage. I tried to add this, I found this here on stack overflow but didn't work

const CancelToken = Axios.CancelToken;
instance.interceptors.request.use(req => {
    /* some logic */
    const CancelToken = Axios.CancelToken;
    return {
        ...req,
        cancelToken: new CancelToken((cancel) => cancel('Cancel repeated request'))
    };
});

but when I used this it only returned " Cancel repeated request " and did nothing. Do you know how can I fix that? Thank you in advance!

Upvotes: 4

Views: 10068

Answers (2)

Kirill Kushpel
Kirill Kushpel

Reputation: 111

My 2cents: looks like it's easier NOT to make the request in the first place, if user is not authorized =) Just add a global middleware on frontend to redirect user to auth page. Here is an example in Vue, but you get the logic.

import { Middleware } from '@nuxt/types';
import { RoutesName } from '~/shared/repository/routes/routes-name';

const auth: Middleware = async (context) => {
  const { route, store } = context;

  const isAuthorized = store.getters['user/isAuthorized'];
  const isAuthPage = route.name === RoutesName.auth;

  if (!isAuthorized && !isAuthPage) {
    return context.redirect(`/${RoutesName.auth}`);
  }

  if (isAuthorized && isAuthPage) {
    return context.redirect('/');
  }
};

export default auth;

Upvotes: 0

user8586543
user8586543

Reputation:

Based on the Axios Documentation - Interceptors, the interceptor function should return the req.

API.interceptors.request.use((req) => {
    if(localStorage.getItem('profile')) {
        req.headers.Authorization = `Bearer ${JSON.parse(localStorage.getItem('profile')).token}`;
    }
    return req;
})

Upvotes: 19

Related Questions