如何在Redux Toolkit的createApi中设置等效的fetch的{凭据："include"}？

Question

我有一个express-react-typescript-redux-passport项目，我使用redux工具包中的createApi在我的后端调用/getuserapi。

我使用passport-google-oauth20策略认证用户，用户认证成功。

我的问题是，护照jsdeserializeUser()函数不调用(即使serializeUser()被调用，用户使用谷歌策略进行身份验证)，所以req.user参数不设置自动当前端发送请求到后端。

我怀疑deserializeUser没有被调用，因为我没有在我的createApi端点设置axio的{ withCredentials: true }(或fetch的{credentials: "include"})参数。我如何在RTK的createApi中发送这个参数?

我如何在这里指定凭据:包含?

这是我的createApi函数

export const userApiSlice = createApi({
reducerPath: "api",
baseQuery: fetchBaseQuery({
baseUrl: "http://localhost:4000",
prepareHeaders(headers) {
return headers;
},
}),
endpoints(builder) {
// debugger;
return {
fetchUser: builder.query<IUser, number | void>({
query: () => {
debugger;
return `/getuser`;
},
}),
};
},
});

这是我的服务器index.js

import express from "express";
import mongoose from "mongoose";
import cors from "cors";
import session from "express-session";
import passport from "passport";
var GoogleStrategy = require("passport-google-oauth20").Strategy;
import { IGoogleAuthUser } from "./types/authTypes";
const PORT = process.env.PORT || 4000;
require("dotenv").config();
const app = express();
mongoose.connect(process.env.LOCAL_DB_ADDRESS, () => {
console.log("connected to mongoose db");
});
app.use(express.json());
app.use(cors({ origin: "http://localhost:3000", credentials: true }));
app.use(
session({
secret: process.env.SESSION_SECRET,
resave: true,
saveUninitialized: true,
})
);
app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser((user: IGoogleAuthUser, done: any) => {
//send a cookie to browser to store user id in session
const { id} = user;
console.log("serializeUser called");
return done(null, id);
});
// why isn't this called???
passport.deserializeUser((userId: string, done: any) => {
//attaches the cookie id from session to req.user
console.log("deserializeUser userId : ", userId);
return done(null, userId);
});
//google strategy
passport.use(
new GoogleStrategy(
{
clientID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
callbackURL: "/auth/google/callback",
},
function (accessToken: any, refreshToken: any, profile: any, done: any) {
//this is called on succesful authentication with the above Google Stratety     
console.log("successful authorization");
done(null, profile);
}
)
);
//when user clicks on 'login with google' /auth/google is hit
app.get(
"/auth/google",
passport.authenticate("google", { scope: ["profile", "email"] }),
(req, res) => {
console.log("/auth/google called"); //this console.log does not get called, not sure why
}
);
app.get(
"/auth/google/callback",
passport.authenticate("google", {
successRedirect: "http://localhost:3000/profile",
failureRedirect: "http://localhost:3000/login",
}),
function (req, res) {
// console.dir(req);
// Successful authentication, redirect home.
console.log("redirect to profile"); //this does get called
res.redirect("http://localhost:3000/profile"); 
}
);
app.get("/", (req, res) => {
res.send("Hello world.");
});
app.get("/getuser", (req: any, res: any) => {
//req should have user thanks to serializer/deserializer
console.log(req.user); // => returns undefined even after successful authentication
res.send(req.user);
});
app.listen(PORT, () => {
console.log(`Server Started on ${PORT}`);
});

为什么不调用deserializeUser()?

Answer 1

fetchBaseQuery只是fetch的一个包装，带有一些额外的选项。

所以要么是

baseQuery: fetchBaseQuery({
baseUrl: "http://localhost:4000",
prepareHeaders(headers) {
return headers;
},
credentials: "include"
}),

或

query: () => {
return { url: `/getuser`, credentials: "include" };
},