我想在传递给 redux saga 之前拦截 api 调用，以检查是否需要刷新 Access Token

Question

我在我的项目中使用 redux saga 来发送 api 调用，现在我想在每次调用之前检查访问令牌的到期时间。流程将在发送每个调用之前，检查访问令牌是否即将过期。如果它即将过期，我将使用我的访问和刷新令牌发送刷新令牌调用，一旦我取回新的访问令牌，我将发送我的原始调用以及这个新的访问令牌。经过研究我意识到我需要一个中间件（除了 saga 中间件），来拦截这些调用并检查访问令牌是否已过期，如果是则调度刷新令牌调用并在成功响应后发送正在等待的调用。因此，我按照以下教程创建了另一个中间件， https://www.metaltoad.com/blog/overview-redux-middleware-react-applications

但是这个新的中间件没有被触发。这是我的应用商店，

const sagaMiddleware = createSagaMiddleware();
const JWTMiddleware = createSagaMiddleware();

const middleware = [];
// middleware.push(JWTMiddleware);
middleware.push(sagaMiddleware);
const componseEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const AppStore = createStore(
  AppReducers,
  componseEnhancers(applyMiddleware(...middleware, JWTMiddleware))
);

// JWT Middleware
JWTMiddleware.run(jwtSaga);

// // saga middleware
sagaMiddleware.run(rootSaga);

export default AppStore;

我的 saga 中间件

export default function* rootSaga() {
    yield all([...UsersSagas, ...CustomerSagas, ...CommentSagas, ...OpportunitySagas]);
}

和我的新中间件，我现在正尝试对其进行初始化，

// export default function* jwtSaga() { // I removed this line because I want the next action, like //below

const jwtSaga = (store) => (next) => (action) => {
  console.log("dispatching", action);
  console.log("previous state", store.getState());
  next(action);
  console.log("new state", store.getState());
};
// }

任何人都可以指导我中间件是否是我描述的流程的正确选择，如果是的话我在创建它时做错了什么？

Answer 1

所以我只需要删除这一行，

const sagaMiddleware = createSagaMiddleware();

我没有在 applyMiddleware 中添加 JWTMIddleware，而是取消了以下行的注释，

middleware.push(JWTMiddleware);

我的中间件现在可以工作了。

我想在传递给 redux saga 之前拦截 api 调用，以检查是否需要刷新 Access Token

I want to intercept api calls before they are passed on to redux saga to check whether Access Token needs to be refreshed

middleware

reactjs

refresh-token