我想在api调用传递到redux saga之前拦截它们，以检查是否需要刷新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;

我的传奇中间件

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);

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