RTK 查询在 cookie 中设置令牌，但没有任何效果

Question

几天前我开始学习 RTK Query，我一直喜欢它很酷的功能和简单性，所以我决定在我使用 Next.js 构建的项目中从 useContext 切换到 RTK Query 以及使用 Node.js 和 Express 的自定义服务器。在这个项目中，我制作了一个用于登录和注册的 api 路由，在提供的自定义 axios 基本查询 RTK 查询的帮助下，可以使用 RTK 查询和 Axios 来实现该路由。登录和注册 api 端点已经有一个在 cookie 存储中存储令牌的逻辑。我将 RTK 查询与 axios 一起使用来发布用户请求，以便他们可以获得 cookie 存储中的令牌存储的响应。这种将用户令牌存储在 cookie 中的逻辑与 useContext 和 axios 配合得很好。但使用 RTK 查询时逻辑并未按预期工作，结果如下：

• 令牌已设置在 cookie 存储中，但我得到的响应状态为 401。
• 当用户在登录或注册页面中提交凭据时，他们应该被重定向到个人资料页面，并显示其详细信息，因为我使用 useQuery 来获取用户个人资料。但数据没有显示。这意味着存储的令牌无效。
• 即使令牌已存储在 cookie 中，我也无法获取用户信息。
• 每当我单击链接将我重定向到特定路线时，useQuery 都不会获取任何内容，当我返回个人资料时，将获取并显示用户详细信息，但当我再次刷新页面时，不会显示任何数据
• 每当第一次获取请求成功时，每当刷新页面时我总是会丢失数据。
• 所有这些问题仅发生在后端受中间件保护的路由上，并且中间件用于验证令牌。但我对重新加载后端数据不受保护的页面没有任何问题。
• 我的后端还有一个中间件，用于验证和检查 cookie 中的 token 是否为 true，以检查用户是否经过身份验证，如果为 false，则应将用户定向到前端的登录页面。获取和检查数据是否为 ​​true 的逻辑位于用受保护的路由包装的 HOC 组件内部，但每当数据值为 false 时，我仍然可以转到前端中的任何路由，而不是将我重定向到登录页面。当我将数据记录到控制台时，我收到了正确的数据。
• 从 cookie 中删除令牌成功。

    export const fetcherApi = createApi({
      reducerPath: "fetcherApi",
      baseQuery: axiosBaseQuery({
        baseUrl: "http://localhost:5000/",
      }),
      tagTypes: ["User"],
      endpoints(build) {
        return {
          //________Authentication
          registerUser: build.mutation({
            query: (form) => ({
              url: "register",
              method: "post",
              data: form,
            }),
            invalidatesTags: ["User"],
          }),

          loginUser: build.mutation({
            query: (form) => ({
              url: "login",
              method: "post",
              data: form,
            }),
            invalidatesTags: ["User"],
          }),

          getAuth: build.query({
            query: () => ({ url: "auth", method: "get" }),
          }),

          //__________User
          updateUserName: build.mutation({
            query: (...rest) => ({
              url: "update-user",
              method: "put",
              data: rest,
            }),
            invalidatesTags: ["User"],
          }),

          getUser: build.query({
            query: () => ({ url: "user", method: "get" }),
            providesTags: ["User"],
          }),

          //__________Profile
          postProfile: build.mutation({
            query: (form) => ({
              url: "login",
              method: "post",
              data: form,
            }),
          }),

          getAllProfiles: build.query({
            query: () => ({ url: "all-profiles", method: "get" }),
          }),

          getUserProfile: build.query({
            query: () => ({ url: "profile/me", method: "get" }),
          }),

          //___________Car
          postCar: build.mutation({
            query: (form) => ({
              url: "new-car",
              method: "post",
              data: form,
            }),
          }),

          putCar: build.mutation({
            query: ({ id, ...rest }) => ({
              url: `update-car/{id}`,
              method: "put",
              data: { rest },
            }),
          }),

          getAllCars: build.query({
            query: () => ({ url: "all-cars", method: "get" }),
          }),

          getCarById: build.query({
            query: (id) => ({ url: `onecar/${id}`, method: "get" }),
          }),

          getAllUserCars: build.query({
            query: () => ({ url: "my-car", method: "get" }),
          }),
        };
      },
    });

    export const {
      // ______Authentication______
      useGetAuthQuery,
      useRegisterUserMutation,
      useLoginUserMutation,
      //_______User_________
      useUpdateUserNameMutation,
      useGetUserQuery,
      //_____Profile_________
      useGetUserProfileQuery,
      useGetAllProfilesQuery,
      usePostProfileMutation,
      //_____Car____________
      usePostCarMutation,
      usePutCarMutation,
      useGetAllCarsQuery,
      useGetCarByIdQuery,
      useGetAllUserCarsQuery,
    } = fetcherApi;

Answer 1

我通过添加credentials: include作为 baseQuery 参数解决了这个问题，并在我的函数中添加了 async 和 wait

 baseQuery: fetchBaseQuery({
    baseUrl: "https://my-app.herokuapp.com/",
    credentials: "include",
  }),