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

Question

我正在构建一个"安全"应用程序,并使用redux-saga和fetchjs来执行对后端的异步调用.

当用户未获得授权时,我的后端返回401状态代码,我想全局捕获此"异常"并发送操作,以便我的反应应用程序进入登录屏幕.

我发现了以下解决方案: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，如果发生错误，将分派操作以存储，您可能会也可能不会对此操作作出反应。