Reactjs - 在 api 调用失败时注销/重定向用户

Question

我使用 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”响应。当我收到此响应时，我想将用户重定向到登录页面。

任何帮助/建议？

谢谢。

Answer 1

下面是一个使用 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 拦截器的文档