Question

在使用redux-saga架构和axios的反应性本机应用程序中，我想拦截401请求并调度将我发送到登录屏幕的操作。

所以在我的axios客户端中，我有：

axiosInstance.interceptors.response.use(
(response) => {
    return response
},
(error) => {

    // token expired
    if (error.response.status === 401) {
        console.log(`401 interceptor error: ${JSON.stringify(error)}`)
        store.dispatch({type: "UNAUTHORIZED_RESPONSE_RECEIVED"})
    }
    return Promise.reject(error)
}
)

现在，尽管可行，但问题是我有一个需求周期：

Require cycle: redux/store.js -> redux/sagas.js -> redux/project/saga.js -> helpers/projectHelper.js -> helpers/client.js -> redux/store.js

这很明显，但是由于要创建商店，所以我要应用sagaMiddleware，对其进行定义，然后导入我的sagas，在其中导入projectHelper（这是axios ajax api调用系列），在其中导入客户端，，要执行store.dispatch()，需要导入商店，请遵循以下一系列选项中的第1个选项：

https://daveceddia.com/access-redux-store-outside-react/#option-1-export-the-store

一切正常，但正确的警告让我有些担心。

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

我的问题是：我怎么能找到其他（也是创造性的）方法来实现我所需要的，即：

拦截401（不要将其放入失败的每个传奇动作中）
（可选）调度一个最终以->
将我发送到“登录”屏幕吗？

Answer 1

对于任何对此用例有麻烦的人，这就是我采用的解决方案。

在我的应用程序主要组件之一（可能是App.tsx）中，我放置了Axios拦截器

    componentDidMount() {


    const self = this;
    axios.interceptors.request.use(
      function(config: AxiosRequestConfig) {

       // useful to show a loader
       self.props.loading(true);

        return config;
      },
      function(error) {
        return Promise.reject(error);
      }
    );

    axios.interceptors.response.use(
      function(response) {
        // loader stops
        self.props.loading(false);

        return response;
      },
      function(error) {
        self.props.loading(false);
        if (
          typeof error.response !== "undefined" &&
          error.response.status === 401
        ) {
          console.log(`401 interceptor error: ${JSON.stringify(error)}`);

          NavigationService.navigate("Login", null);
        }
        if (
          typeof error.message !== "undefined" &&
          error.message == "Network Error"
        ) {
          console.log(`Network Error`);
        }
        return Promise.reject(error);
      }
    );

并不完美，但我希望它对尝试实现此目标的人们有用！

需要周期，同时需要存储在axios中

1 个答案: