使用 redux-saga 和 fetch 自动处理 401 响应

Question

我正在构建一个 "secured" 应用程序，并将 redux-saga 与 fetchjs 一起用于对后端进行异步调用。

我的后端 returns 当用户未被授权时出现 401 状态代码，我想在全局范围内捕获此 "exception" 并发送一个操作，以便我的 React 应用程序进入登录屏幕。

我找到了以下解决方案：https://github.com/redux-saga/redux-saga/issues/110，但在这种情况下，对 401 的处理应该在我们构建的每个传奇中都是明确的。

通过向每个传奇添加代码，它变得更加复杂。它还增加了开发人员忘记添加用于处理 401 代码的代码的机会。

有什么好的方法可以全局处理这个 401 响应吗？

Answer 1

我不会使用 redux-saga，因为它无法满足您的要求。

相反，在设置商店时，API 层和其他配置 API 层会在每次发生错误时调用处理程序。

报告调用错误处理程序的 API 层示例。

const conf = {
    onError: () => {},
}

api.onError = (cb) => {
    conf.onError = cb;
}

api.get = (url) => {
    fetch(url)
        .then(response => {
            if (response.ok === false) {
                return conf.onError(response);
            }
            return response;
        })
        // Network error
        .catch(conf.onError)
}

配置应用程序。

import store from './store';

// Configure your API wrapper and set error callback which will be called on every API error.
api.onError((error) => {
    store.dispatch({
        type: 'API_ERROR',
        payload: error,
    });
});

// In you reducers...
isAuthorized(state, action) {
    if (action.type === 'API_ERROR' && action.payload.statusCode === 401) {
        return false;
    }
    return state;
}

然后，像往常一样调用 API，如果发生错误，将向存储发送操作，您可能会也可能不会对此操作做出反应。

使用 redux-saga 和 fetch 自动处理 401 响应

Automatic handle 401 response with redux-saga and fetch

fetch

reactjs

redux-saga

react-redux