如何在Redux每次dispatch前执行前置检查，拦截未验证用户的API请求？

Redux 中间件就是专门用来在 action 被 dispatch 后、到达 reducer 之前插入自定义逻辑的扩展点，完全符合你想要的「统一拦截所有action，无需逐个修改」的需求。

步骤1：编写验证拦截中间件 #

这个中间件会检查每个 action 是否需要用户验证，若未验证则阻止该 action 继续传递：

const authMiddleware = store => next => action => {
  // 定义判断规则：比如通过 action 的 meta 字段，或者类型前缀识别需要API调用的action
  const requiresAuth = action.meta?.requiresAuth || action.type.startsWith('API_');
  
  // 从store获取当前用户的验证状态
  const { isAuthenticated } = store.getState().auth;

  if (requiresAuth && !isAuthenticated) {
    // 未验证时执行自定义逻辑，比如提示用户、跳转登录页
    console.log('用户未登录，无法执行API请求');
    return; // 直接返回，不调用next(action)，阻止action继续流转
  }

  // 验证通过或无需验证的action，正常传递给下一个中间件或reducer
  return next(action);
};

步骤2：将中间件添加到Redux Store #

如果你用Redux Toolkit（推荐）：

import { configureStore } from '@reduxjs/toolkit';
import authMiddleware from './authMiddleware';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(authMiddleware),
});

如果你用传统Redux：

import { createStore, applyMiddleware } from 'redux';
import authMiddleware from './authMiddleware';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(authMiddleware)
);

步骤3：标记需要验证的Action #

你需要给那些调用API的action加上识别标记，比如：

用Redux Toolkit的createAsyncThunk：

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUserProfile = createAsyncThunk(
  'user/fetchProfile',
  async () => {
    const res = await fetch('/api/user/profile');
    return res.json();
  },
  {
    meta: { requiresAuth: true } // 标记该action需要验证
  }
);

普通Action Creator：

export const fetchOrders = () => ({
  type: 'API_FETCH_ORDERS',
  meta: { requiresAuth: true }
});

这种方式只需一次配置，所有符合规则的action都会被自动拦截，无需逐个修改action调用处，完美解决你action数量多的问题。

内容的提问来源于stack exchange，提问作者warCommander