使用RTK构建状态管理库时，JWT认证及Axios选型疑问

一、RTK缓存JWT的担忧解决 #

RTK Query的缓存机制是针对API接口响应数据设计的，JWT令牌本身不应该被放到RTK Query的缓存池中——正确的做法是把JWT单独存在Redux的普通slice里（而非RTK Query的缓存），用createSlice创建一个authSlice来管理令牌、用户信息等认证状态：

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

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    token: null,
    user: null
  },
  reducers: {
    setCredentials: (state, action) => {
      const { token, user } = action.payload;
      state.token = token;
      state.user = user;
    },
    logout: (state) => {
      state.token = null;
      state.user = null;
    }
  }
});

export const { setCredentials, logout } = authSlice.actions;
export default authSlice.reducer;

如果你的API响应里不小心返回了JWT（不推荐这么做），可以在RTK Query的endpoint配置里禁用该接口的缓存：

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    login: builder.mutation({
      query: (credentials) => ({
        url: '/login',
        method: 'POST',
        body: credentials
      }),
      // 禁用该接口的缓存，避免JWT被缓存
      keepUnusedDataFor: 0
    })
  })
});

另外，若需要页面刷新后保留JWT，可搭配redux-persist持久化authSlice，但注意对敏感的JWT进行加密存储，降低XSS风险。

二、是否需要同时使用Axios与JWT？ #

不是必须，但可以根据项目需求选择：

方案1：只用RTK Query的fetchBaseQuery #

RTK Query自带的fetchBaseQuery足够处理JWT的携带逻辑，只需在baseQuery里配置请求头：

const baseQuery = fetchBaseQuery({
  baseUrl: '/api',
  prepareHeaders: (headers, { getState }) => {
    const token = getState().auth.token;
    if (token) {
      headers.set('authorization', `Bearer ${token}`);
    }
    return headers;
  }
});

const api = createApi({
  baseQuery,
  endpoints: (builder) => ({
    // 定义你的接口
  })
});

这种方案无需额外引入Axios，适合需求简单的场景。

方案2：结合Axios使用 #

如果你的项目依赖Axios的高级特性（比如请求拦截器、自动重试、请求取消、统一错误处理等），可以把Axios作为RTK Query的自定义baseQuery：

import axios from 'axios';

const axiosBaseQuery =
  ({ baseUrl } = { baseUrl: '' }) =>
  async ({ url, method, body, headers }) => {
    try {
      const result = await axios({
        url: baseUrl + url,
        method,
        data: body,
        headers
      });
      return { data: result.data };
    } catch (axiosError) {
      let err = axiosError;
      return {
        error: {
          status: err.response?.status,
          data: err.response?.data || err.message
        }
      };
    }
  };

// 然后在Axios实例里配置JWT拦截器
const axiosInstance = axios.create({ baseURL: '/api' });
axiosInstance.interceptors.request.use((config) => {
  const token = localStorage.getItem('token'); // 或从Redux state获取
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 用这个Axios实例创建RTK Query的baseQuery
const api = createApi({
  baseQuery: axiosBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    // 定义你的接口
  })
});

这种方案能复用Axios的生态，适合复杂的请求场景。

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