问axios中的cancelToken是什么?我是如何修复它的？
EN

Stack Overflow用户

提问于 2022-06-11 20:56:19

回答 2查看 1.5K关注 0票数 0

我制作了一个React应用程序，并使用Axios向后端发出请求。我在后端创建了一个中间件，用于授权，在前端，我试图将每个调用传递到后端，如果localStorage中存在auth令牌的话。在我添加逻辑之前，每件事情都很完美，现在每当我尝试登录或注册时，我都会在控制台中得到它。

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

我的index.js处理对后端的每个调用，如下所示：

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);

现在我还没有登录，所以localStorage中没有配置文件。我试图添加这个，我在堆栈溢出中找到了这个，但是没有工作。

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'))
    };
});

但是当我使用它时，它只返回了“取消重复请求”，什么也没做。你知道我该怎么解决这个问题吗？提前谢谢你！

axios

有奖征集｜云上CPU玩转AIGC挑战赛

参加活动赢取洛斐键盘、小米电纸书、智能音响等鹅厂周边！

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-06-11 21:14:34

基于Axios文档-拦截器，拦截器函数应该返回req。

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

票数 4

Stack Overflow用户

发布于 2022-06-11 21:25:05

我的2 2cents:看起来更容易不提出请求，如果用户没有授权=)只需在前端添加一个全局中间件就可以将用户重定向到auth页面。下面是Vue中的一个例子，但是您得到了逻辑。

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;