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

Question

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

当用户未经授权时，我的后端返回 401 状态代码，我想全局捕获此“异常”并分派(dispatch)一个操作，以便我的 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，如果发生错误，则会将操作分派(dispatch)到存储，您可能会也可能不会对此操作使用react。