axios中的cancelToken是什么?我是如何修复它的？
axios中的cancelToken是什么?我是如何修复它的？
提问于 2022-06-12 04:56:19
我制作了一个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'))
};
});但是当我使用它时，它只返回了“取消重复请求”，什么也没做。你知道我该怎么解决这个问题吗？提前谢谢你！
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-06-12 05: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;
})Stack Overflow用户
发布于 2022-06-12 05: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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72589579
复制相关文章
相似问题
腾讯云开发者
