我使用 Reactjs 构建了一个 Web 应用程序。我使用路由器和 redux 进行状态管理以进行身份验证。一切正常，但问题出在 api 调用上。在用户登录并调用 ... 服务后，我想检查服务的响应是否包含任何令牌问题（例如：令牌已过期）。如果存在令牌问题，我想使令牌无效（将其删除）并将用户发送回带有错误消息的登录页面。现在，如果我在 redux action/reducer 中执行所有 api 调用，我就可以做到这一点。但是我不确定是否必须为每次调用都实现 redux，因为我不需要其他组件中的数据。而且在 redux 中实现所有服务非常耗时，需要大量代码。
我将该项目复制到 stackblitz。
https://stackblitz.com/edit/react-auth?file=index.js
场景很简单。单击登录，您就在应用程序中。该应用程序会自动调用服务并获得响应。如果您在 api.js 中将 URL 更改为错误的 URL，则此服务将提供“40x”响应。当我收到此响应时，我想将用户重定向到登录页面。
任何帮助/建议？
谢谢。
这是一个使用 axios 和您的 api.js 的示例：
import axios from 'axios';
const apiKey = 'API_KEY';
export async function getWeather() {
const url = `https://reqres.in/api/users?page=2`;
axios.interceptors.response.use(handleSuccess, handleError)
return await axios.post(url);
}
function handleSuccess(response) {
console.log('success');
return ({data: response.data});
}
function handleError(error) {
if (error.message === 'Network Error') {
// The user doesn't have internet
return Promise.reject(error);
}
switch (error.response.status) {
case 400:
break;
case 401:
// Go to login
break;
case 404:
// Show 404 page
break;
case 500:
// Serveur Error redirect to 500
break;
default:
// Unknow Error
break;
}
return Promise.reject(error);
}
因此，根据代码状态和代码答案所需的行为，您应该重定向用户或仅向他显示模式。
检查有关axios 拦截器的文档
我知道这很旧，但我正在尝试与 shotofcode 做同样的事情，但使用 fetch 而不使用 redux（主要是因为我在其他任何地方都不需要它）。当我的服务器响应“401 Unauthorized”时，我能够从服务重定向到登录页面，但我无法从那里返回错误消息。
我能想到的一个可能的解决方案是将错误消息保存在 localStorage 中并在登录页面中获取它。另一个选项是在组件级别捕获并处理错误，但违背了使用服务的目的，并意味着重复大量代码。
有没有人找到更好的解决方案？