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

Posted 2023-02-22

【中文标题】使用 redux-saga 和 fetch 自动处理 401 响应

【英文标题】：Automatic handle 401 response with redux-saga and fetch

【发布时间】：2017-06-07 06:05:06

【问题描述】：

我正在构建一个“安全”应用程序，并使用 redux-saga 和 fetchjs 对后端进行异步调用。

当用户未获得授权时，我的后端返回 401 状态码，我想全局捕获此“异常”并调度一个操作，以便我的 react 应用程序进入登录屏幕。

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

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

有没有一种很好的方法来全局处理这个 401 响应？

【参考方案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，如果发生错误，则将 action 调度到 store，您可能会也可能不会对这些 action 做出反应。