前端注册用户时api.js中'token'未定义问题排查咨询

以下是针对问题的分步排查和修复方案：

1. 确保useRegisterMutation在组件中正确调用 #

RTK Query的mutation必须在组件中通过hook调用并触发，否则RegisterSlice的extraReducers不会执行。检查你的注册组件代码，确保符合以下模式：

import { useRegisterMutation } from '../path/to/registerSlice';

function RegisterForm() {
  const [register, { isLoading, isSuccess, isError, error }] = useRegisterMutation();

  const handleSubmit = async (credentials) => {
    try {
      // 调用mutation并处理返回结果，unwrap()会抛出请求错误
      const result = await register(credentials).unwrap();
      console.log('注册返回数据:', result);
    } catch (err) {
      console.error('注册失败:', err);
    }
  };

  // 监听mutation状态变化
  useEffect(() => {
    if (isSuccess) {
      console.log('注册流程已触发成功回调');
    }
    if (isError) {
      console.error('注册请求出错:', error);
    }
  }, [isSuccess, isError, error]);

  // 表单渲染和提交逻辑...
}

2. 移除不必要的responseHandler配置 #

你的Register Mutation中手动将响应转为文本后再解析JSON，容易因格式问题导致payload处理失败。RTK Query默认会自动解析JSON响应，直接移除该配置：

// registerSlice.js 中修改register mutation
const registerApi = api.injectEndpoints({
  endpoints: (builder) => ({
    register: builder.mutation({
      query: (credentials) => ({
        url: "/register",
        method: "POST",
        body: credentials,
        // 删掉这行：responseHandler: (response) => response.text(),
      }),
      invalidateTags: ["User"],
    }),
  }),
});

同时简化extraReducers中的payload处理：

extraReducers: (builder) => {
  builder.addMatcher(
    registerApi.endpoints.register.matchFulfilled,
    (state, { payload }) => {
      console.log('注册成功返回:', payload);
      state.token = payload.token;
      // 直接存入sessionStorage
      window.sessionStorage.setItem("Token", payload.token);
    }
  );
},

3. 确认RegisterSlice已加入Redux Store #

如果RegisterSlice没有被添加到store中，getState().register会返回undefined，extraReducers也不会生效。检查你的store配置：

// store.js
import { configureStore } from "@reduxjs/toolkit";
import { api } from "./api";
import registerReducer from "./features/auth/registerSlice"; // 路径根据实际项目调整

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
    register: registerReducer, // 必须添加这一行
    // 如果有loginSlice也要对应添加
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});

4. 修正prepareHeaders的逻辑错误 #

你的api.js中存在两个关键错误：

• sessionStorage.getItem只需要传入键名，不需要第二个参数
• 没有返回修改后的headers，导致授权头设置不生效

修正后的代码：

// api.js 中修改prepareHeaders
prepareHeaders: (headers, { getState }) => {
  const token = getState().register.token || getState().login.token;
  const sessionToken = window.sessionStorage.getItem("Token"); // 移除第二个参数
  const finalToken = token || sessionToken;
  
  if (finalToken) {
    headers.set("authorization", `Bearer ${finalToken}`);
  }
  return headers; // 必须返回修改后的headers
},

5. 调试验证 #

完成上述修改后：

1. 打开浏览器DevTools的Console面板，查看注册时的日志输出
2. 检查Application面板中sessionStorage是否已存入Token
3. 查看Network面板，确认注册请求的响应是否包含token字段

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